RadioButton

@ui5/webcomponents
<ui5-radio-button>

Basic RadioButton Types

<ui5-radio-button text="Option A" checked name="GroupA"></ui5-radio-button>
<ui5-radio-button text="Option B" value-state="None" name="GroupA"></ui5-radio-button>
<ui5-radio-button text="Option C" value-state="Warning" name="GroupA"></ui5-radio-button>
<ui5-radio-button text="Option D" value-state="Error" name="GroupA"></ui5-radio-button>
<ui5-radio-button text="Option E" disabled name="GroupA"></ui5-radio-button>
<ui5-radio-button text="Option F" readonly name="GroupA"></ui5-radio-button>
	

RadioButton in group - navigate via [UP/Right] and [DOWN/Left] arrow keys

Group of states Selected radio: None
Group of options Selected radio: Option A
<script>
radioGroup.addEventListener("change", function(e) {
	lblRadioGroup.innerHTML = e.target.text;
});
</script>

<div aria-labelledby="radioGroupTitle1" role="radiogroup" id="radioGroup" class="radio-button-group">
	<ui5-title id="radioGroupTitle1">Group of states</ui5-title>
	<ui5-label id="lblRadioGroup">Selected radio: None</ui5-label>
	<ui5-radio-button text="None" value-state="None" checked name="GroupB"></ui5-radio-button>
	<ui5-radio-button text="Warning" value-state="Warning" name="GroupB"></ui5-radio-button>
	<ui5-radio-button text="Error" value-state="Error" name="GroupB"></ui5-radio-button>
</div>
<div aria-labelledby="radioGroupTitle2" role="radiogroup" id="radioGroup2" class="radio-button-group">
	<ui5-title id="radioGroupTitle2">Group of options</ui5-title>
	<ui5-label id="lblRadioGroup2">Selected radio: Option A</ui5-label>
	<ui5-radio-button text="Option A" checked name="GroupC"></ui5-radio-button>
	<ui5-radio-button text="Option B" value-state="None" name="GroupC"></ui5-radio-button>
	<ui5-radio-button text="Option C" value-state="None" name="GroupC"></ui5-radio-button>
</div>
	

RadioButton with Text Wrapping

		<ui5-radio-button text="ui5-radio-button with 'wrapping-type=Normal' set and some long text" wrapping-type="Normal"></ui5-radio-button>
		<ui5-radio-button text="Another ui5-radio-button with very long text here" wrapping-type="Normal"></ui5-radio-button>
	

Overview

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";

Properties/Attributes

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.

Name
Type
Default Value
Description
checked
boolean
false
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.
since v1.0.0-rc.15
disabled
boolean
false
Defines whether the component is disabled.

Note: A disabled component is completely noninteractive.
name
string
""
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.
readonly
boolean
false
Defines whether the component is read-only.

Note: A read-only component is not editable, but still provides visual feedback upon user interaction.
text
string
""
Defines the text of the component.
value
string
""
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";
valueState
value-state
ValueState
"None"
Defines the value state of the component.

Available options are:
  • None
  • Error
  • Warning
wrappingType
wrapping-type
WrappingType
"None"
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.

Events

This Web Component fires semantic events upon user interaction. You can bind to these events with the standard DOM APIs, such as addEventListener.

Name
Description
change
Fired when the component checked state changes.
since v1.0.0-rc.15
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White Horizon
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel