Radio Buttons are circular actions used to make single-choice decisions.
Overview
Radio Buttons are designed to take up small interface area, which can fit within a multitude of workflows. Radio Buttons always have one selected item, denoted with a filled Brand color. You can use Radio Button Group as a convenient utility for layout and group configurations.
For "yes" and "no" interactions, multiple selections, and interactions where a choice is optional, please consider Checkbox. The key difference between a checkbox and radio is that radios must always have something active, whereas a checkbox is optional.
For "on" and "off" or boolean interactions, please consider Switch.
Usage
- Various interactions where a single choice needs to be made
- Forms
Sample
<calcite-label layout="inline">
<calcite-radio-button value="maps"></calcite-radio-button>
Maps
</calcite-label>
Accessibility
Radio Button should be accompanied by a Label, which provides context of the intent to support assistive technologies.
Keyboard navigation
When Radio Buttons are presented with the same name
property value, or contained in a Radio Button Group:
Key | Function |
---|---|
Arrow left | Moves focus and selection to previous item. If the current focus and selection is the first item, the focus and selection will cycle to the last item. |
Arrow right | Moves focus and selection to next item. If the current focus and selection is the last item, the focus and selection will cycle to the first item. |
Arrow down | Moves focus and selection to previous item. If the current focus and selection is the first item, the focus and selection will cycle to the last item. |
Arrow up | Moves focus and selection to next item. If the current focus and selection is the last item, the focus and selection will cycle to the first item. |
Tab | Moves focus in and out of component. |
Tab and Shift | Moves focus in and out of component. |
Writing and copy

- Keep labels for Radio Buttons simple and succinct
- Do not use contractions (you're, aren't, can't, haven't) for Radio Button labels in order to reduce confusion
- Avoid writing Radio Button text as questions.
API reference
Properties
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
checked | checked | When true , the component is checked. | boolean | false |
disabled | disabled | When true , interaction is prevented and the component is displayed with lower opacity. | boolean | false |
form | form | The id of the form that will be associated with the component.
When not set, the component will be associated with its ancestor form element, if any. | string | |
name | name | Specifies the name of the component. Can be inherited from calcite-radio-button-group .
Required to pass the component's value on form submission. | string | |
required | required | When true and the component resides in a form,
the component must have a value selected from the calcite-radio-button-group in order for the form to submit. | boolean | false |
scale | scale | Specifies the size of the component inherited from the calcite-radio-button-group . | "l" | "m" | "s" | "m" |
value | value | The component's value. | any |
Events
Name | Description | Behavior |
---|---|---|
calciteRadioButtonChange | Fires only when the radio button is checked. This behavior is identical to the native HTML input element.
Since this event does not fire when the radio button is unchecked, it's not recommended to attach a listener for this event
directly on the element, but instead either attach it to a node that contains all of the radio buttons in the group
or use the calciteRadioButtonGroupChange event if using this with calcite-radio-button-group . |
Methods
Name | Description | Signature |
---|---|---|
componentOnReady | Create a promise that resolves once component is fully loaded. | componentOnReady(): Promise<void> |
setFocus | Sets focus on the component. | setFocus(): Promise<void> |