Basic RadioButton Types
RadioButton in group - navigate via [UP/Right] and [DOWN/Left] arrow keys
RadioButton with Text Wrapping
ui5-radiobuttoncomponent enables users to select a single option from a set of options. When a
ui5-radiobuttonis selected by the user, the
selectevent is fired. When a
ui5-radiobuttonthat is within a group is selected, the one that was previously selected gets automatically deselected. You can group radio buttons by using the
ui5-radiobuttonis not part of a group, it can be selected once, but can not be deselected back.
Keyboard HandlingOnce the
ui5-radiobuttonis on focus, it might be selected by pressing the Space and Enter keys.
The Arrow Down/Arrow Up and Arrow Left/Arrow Right keys can be used to change selection between next/previous radio buttons in one group, while TAB and SHIFT + TAB can be used to enter or leave the radio button group.
Note: On entering radio button group, the focus goes to the currently selected radio button.
ES6 Module Import
You can use both properties and attributes with the same effect. The name of each attribute is listed below the name of the property, if different.
Note: A disabled
ui5-radiobuttonis completely noninteractive.
ui5-radiobutton. Radio buttons with the same
namewill form a radio button group.
Note: The selection can be changed with
ARROW_LEFT/RIGHTkeys between radio buttons in same group.
Note: Only one radio button can be selected per group.
Important: For the
nameproperty to have effect when submitting forms, you must add the following import to your project:
Note: When set, a native
inputHTML element will be created inside the
ui5-radiobuttonso that it can be submitted as part of an HTML form.
Note: A read-only
ui5-radiobuttonis not editable, but still provides visual feedback upon user interaction.
ui5-radiobuttonis selected or not.
Note: The property value can be changed with user interaction, either by cliking/tapping on the
ui5-radiobutton, or by using the Space or Enter key.
ui5-radiobutton. When a form with a radio button group is submitted, the group's value will be the value of the currently selected radio button.
Important: For the
valueproperty to have effect, you must add the following import to your project:
Available options are:
ui5-radiobuttontext wraps when there is not enough space.
Note: By default, the text truncates when there is not enough space.
This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as
ui5-radiobuttonselected state changes.