Radio
<gr-radio> | GrRadio
Radios allow the user to select one option from a group of many.
Radios are designed to be used with radio groups. As such, all of the examples on this page utilize them to demonstrate their correct usage.
<gr-radio-group label="Select an option" value="1">
<gr-radio value="1">Option 1</gr-radio>
<gr-radio value="2">Option 2</gr-radio>
<gr-radio value="3">Option 3</gr-radio>
</gr-radio-group>Options
Disabled
Use the disabled attribute to disable a radio.
<gr-radio-group label="Select an option">
<gr-radio value="1" checked>Option 1</gr-radio>
<gr-radio value="2">Option 2</gr-radio>
<gr-radio value="3">Option 3</gr-radio>
<gr-radio value="4" disabled>Disabled</gr-radio>
</gr-radio-group>Usage guidelines
Use radio buttons for mutually exclusive options
Radio buttons and checkboxes are not interchangeable. Radio buttons are best used for selecting a single option from a list of mutually exclusive options. Checkboxes are best used for selecting as many options as desired (or none).
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
checked |
checked |
Set to true to draw the radio in a checked state. | boolean |
false |
disabled |
disabled |
Set to true to disable the radio. | boolean |
false |
value |
value |
The radio's value attribute. | string |
undefined |
Events
| Event | Description | Type |
|---|---|---|
gr-blur |
Emitted when the control loses focus. | CustomEvent<any> |
gr-focus |
Emitted when the control gains focus. | CustomEvent<any> |
Methods
removeFocus() => Promise<void>
Removes focus from the radio.
Returns
Type: Promise<void>
setFocus(options?: FocusOptions) => Promise<void>
Sets focus on the radio.
Returns
Type: Promise<void>
Slots
| Slot | Description |
|---|---|
(default) |
The radio's label. |
CSS custom properties
| Name | Description |
|---|---|
--control-background-color |
Background color of the control |
--control-background-color-checked |
Background color of the control when checked |
--control-background-color-checked-focus |
Background color of the control when checked on focus |
--control-background-color-checked-hover |
Background color of the control when checked on hover |
--control-background-color-focus |
Background color of the control on focus |
--control-background-color-hover |
Background color of the control on hover |
--control-border-color |
Border color of the control |
--control-border-color-checked |
Border color of the control when checked |
--control-border-color-checked-focus |
Border color of the control when checked on focus |
--control-border-color-checked-hover |
Border color of the control when checked on hover |
--control-border-color-focus |
Border color of the control on focus |
--control-border-color-hover |
Border color of the control on hover |
--control-color-checked |
Color of the control when checked (the small circle) |
--control-size |
Size of the control |
--label-color |
Color of the label |