Radio Group
A set of checkable buttons — known as radio buttons — where no more than one of the buttons can be checked at a time.
Features
- Full keyboard navigation
- Can be controlled or uncontrolled
- Supports horizontal and vertical orientation
Anatomy
- Root: The root container for the radio group
- Item: The individual radio button items
API Reference
createRadioGroup
The builder function used to create the radio group component.
Props
| Prop | Default | Type / Description |
disabled | false | boolean Whether or not the radio group is disabled. |
required | false | boolean Whether or not the radio group is required. |
loop | false | boolean Whether or not the focus should loop back to the first item when the last item is reached. |
orientation | 'vertical' | 'horizontal' | 'vertical' The orientation of the radio group. |
name | - | string The name to be used for the hidden input. |
defaultValue | - | string The value of the default checked radio item. |
value | - | Writable<string> A writable store that can be used to update the radio group value. |
onValueChange | - | ChangeFn<string> A callback that is called when the value of the radio group changes. See Change Functions |
Elements
| Element | Description |
The builder store used to create the radio group root. | |
The builder store used to create the radio group item. | |
The builder store used to create the radio group hidden input. |
States
| State | Description |
value | A writable store with the current value of the radio group. |
Helpers
| Helper | Description |
isChecked | A derived store function that returns whether or not the radio item is checked. |
Options
| Option | Description |
disabled | Whether or not the radio group is disabled. |
required | Whether or not the radio group is required. |
loop | Whether or not the focus should loop back to the first item when the last item is reached. |
orientation | The orientation of the radio group. |
name | The name to be used for the hidden input. |
root
The radio group component.
Data Attributes
| Data Attribute | Value |
[data-orientation] |
|
[data-melt-radio-group] | Present on all radio group elements. |
item
The radio group item components.
Props
| Prop | Default | Type / Description |
value * | - | string The value of the radio item. |
disabled | false | boolean Whether or not the radio item is disabled. |
Data Attributes
| Data Attribute | Value |
[data-disabled] | Present when the item is disabled. |
[data-value] | The value of the radio item. |
[data-state] |
|
[data-orientation] |
|
[data-melt-radio-group-item] | Present on all radio group item elements. |
Custom Events
| Event | Value |
m-click | (e: ) => void |
m-focus | (e: ) => void |
m-keydown | (e: ) => void |
hiddenInput
The hidden input element used for form submission.
Accessibility
Adheres to the Radio Group WAI-ARIA design pattern
| Key | Behavior |
| Tab | Moves focus to either the checked radio item or the first radio item. |
| Space | When focused on an unchecked item, checks it. |
| ArrowDown | Moves focus to & checks the next radio item |
| ArrowRight | Moves focus to & checks the next radio item |
| ArrowUp | Moves focus to & checks the previous radio item |
| ArrowLeft | Moves focus to & checks the previous radio item |
On This Page