RadioButton

@ui5/webcomponents
<ui5-radiobutton>

Basic RadioButton Types

<ui5-radiobutton text="Option A" selected name="GroupA"></ui5-radiobutton>
<ui5-radiobutton text="Option B" value-state="None" name="GroupA"></ui5-radiobutton>
<ui5-radiobutton text="Option C" value-state="Warning" name="GroupA"></ui5-radiobutton>
<ui5-radiobutton text="Option D" value-state="Error" name="GroupA"></ui5-radiobutton>
<ui5-radiobutton text="Option E" disabled name="GroupA"></ui5-radiobutton>
	

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("select", function(e) {
	lblRadioGroup.innerHTML = e.target.text;
});
</script>

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

RadioButton with Text Wrapping

		<ui5-radiobutton text="ui5-radiobutton with 'wrap' set and some long text" wrap></ui5-radiobutton>
		<ui5-radiobutton text="Another ui5-radiobutton with very long text here" wrap></ui5-radiobutton>
	

Overview

The ui5-radiobutton component enables users to select a single option from a set of options. When a ui5-radiobutton is selected by the user, the select event is fired. When a ui5-radiobutton 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-radiobutton is not part of a group, it can be selected once, but can not be deselected back.

Keyboard Handling

Once the ui5-radiobutton 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
disabled
boolean
false
Determines whether the ui5-radiobutton is disabled.

Note: A disabled ui5-radiobutton is completely noninteractive.
name
string
""
Defines the name of the ui5-radiobutton. 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 ui5-radiobutton so that it can be submitted as part of an HTML form.
readonly
boolean
false
Determines whether the ui5-radiobutton is read-only.

Note: A read-only ui5-radiobutton is not editable, but still provides visual feedback upon user interaction.
selected
boolean
false
Determines whether the ui5-radiobutton is 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.
text
string
""
Defines the text of the ui5-radiobutton.
value
string
""
Defines the form value of the 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 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 ui5-radiobutton.

Available options are:
  • None
  • Error
  • Warning
wrap
boolean
false
Defines whether the ui5-radiobutton text wraps when there is not enough space.

Note: By default, the text truncates when there is not enough space.

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
select
Fired when the ui5-radiobutton selected state changes.
Theme: Quartz Light Quartz Dark Quartz High Contrast Black Quartz High Contrast White Belize High Contrast Black High Contrast White
Content Density: Cozy Compact
Text Direction: LTR RTL
Apply Cancel