Calcite Radio Buttons are circular actions used to make single-choice decisions.
Radio Buttons are simple designs used to take up small interface area that 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/no interactions, multi-select, 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 the Checkbox utility is optional.
For on/off or boolean interactions, please consider Switch.
- Various interactions where a single-choice needs to be made
- 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.
The checked state of the radio button.
The disabled state of the radio button.
The id attribute of the radio button. When omitted, a globally unique identifier is used.
The name of the radio button. `name` is passed as a property automatically from `calcite-radio-button-group`.
Requires that a value is selected for the radio button group before the parent form will submit.
The scale (size) of the radio button. `scale` is passed as a property automatically from `calcite-radio-button-group`.
The value of the radio button.
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.
Sets focus on the component.