RadioButton in group - navigate via [UP/Right] and [DOWN/Left] arrow keys
Group of statesSelected radio: None
Group of optionsSelected radio: Option A
RadioButton with Text Wrapping
The ui5-radio-button component enables users to select a single option from a set of options. When a ui5-radio-button is selected by the user, the change event is fired. When a ui5-radio-button that is within a group is selected, the one that was previously selected gets automatically deselected. You can group radio buttons by using the name property. Note: If ui5-radio-button is not part of a group, it can be selected once, but can not be deselected back.
Once the ui5-radio-button is 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.
Defines the IDs of the elements that label the component.
Defines whether the component is checked or not.
Note: The property value can be changed with user interaction, either by clicking/tapping on the component, or by using the Space or Enter key.
Defines whether the component is disabled.
Note: A disabled component is completely noninteractive.
Defines the name of the component. Radio buttons with the same name will form a radio button group.
Note: The selection can be changed with ARROW_UP/DOWN and ARROW_LEFT/RIGHT keys between radio buttons in same group.
Note: Only one radio button can be selected per group.
Important: For the name property to have effect when submitting forms, you must add the following import to your project: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";
Note: When set, a native input HTML element will be created inside the component so that it can be submitted as part of an HTML form.
Defines whether the component is read-only.
Note: A read-only component is not editable, but still provides visual feedback upon user interaction.
Defines the text of the component.
Defines the form value of the component. 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 value property to have effect, you must add the following import to your project: import "@ui5/webcomponents/dist/features/InputElementsFormSupport.js";
Defines the value state of the component.
Available options are:
Defines whether the component text wraps when there is not enough space.
Available options are:
None - The text will be truncated with an ellipsis.
Normal - The text will wrap. The words will not be broken based on hyphenation.
This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.
Fired when the component checked state changes.
Theme:Quartz LightQuartz DarkQuartz High Contrast BlackQuartz High Contrast WhiteMorning Horizon (Light)Evening Horizon (Dark)Horizon High Contrast BlackHorizon High Contrast WhiteBelize