Skip to main content

RadioButton

<ui5-radio-button>

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.

Keyboard Handling​

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​

import "@ui5/webcomponents/dist/RadioButton";

Basic Sample​

Properties​

disabled​

DescriptionDefines whether the component is disabled.
Note: A disabled component is completely noninteractive.
Typeboolean
Defaultfalse

readonly​

DescriptionDefines whether the component is read-only.
Note: A read-only component isn't editable or selectable. However, because it's focusable, it still provides visual feedback upon user interaction.
Typeboolean
Defaultfalse

required​

DescriptionDefines whether the component is required.
Typeboolean
Defaultfalse
Since1.9.0

checked​

DescriptionDefines 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.
Note: Only enabled radio buttons can be checked. Read-only radio buttons are not selectable, and therefore are always unchecked.
Typeboolean
Defaultfalse
Since1.0.0-rc.15

text​

DescriptionDefines the text of the component.
Typestring | undefined
Defaultundefined

valueState​

DescriptionDefines the value state of the component.
Type"None" | "Positive" | "Critical" | "Negative" | "Information"
Default"None"

name​

DescriptionDetermines the name by which the component will be identified upon submission in an HTML form.
Radio buttons with the same name will form a radio button group.
Note: By this name the component will be identified upon submission in an HTML form.
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.
Typestring | undefined
Defaultundefined

value​

DescriptionDefines 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.
Typestring
Default""

wrappingType​

DescriptionDefines whether the component text wraps when there is not enough space.
Note: for option "Normal" the text will wrap and the words will not be broken based on hyphenation.
Type"None" | "Normal"
Default"Normal"

accessibleName​

DescriptionDefines the accessible ARIA name of the component.
Typestring | undefined
Defaultundefined
Since1.6.0

accessibleNameRef​

DescriptionDefines the IDs of the elements that label the component.
Typestring | undefined
Defaultundefined
Since1.1.0

Slots​

No slots available for this component.

Events​

change​

DescriptionFired when the component checked state changes.
TypeCustomEvent
Since1.0.0-rc.15
BubblesYes
CancelableNo

Methods​

No methods available for this component.

CSS Parts​

NameDescription
outer-ringUsed to style the outer ring of the ui5-radio-button.
inner-ringUsed to style the inner ring of the ui5-radio-button.

More Samples​

States​

The RadioButton supports several semantic value states, readonly, disabled, etc.

Text Truncation and Wrapping​

The RadioButton text wraps by default. To make it truncate - set wrapping-type="None".