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.

View code

default

comfortable

compact

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

Props

Prop	Default	Type / Description
`disabled`	`false`	`boolean` Whether or not the radio group is disabled.
`loop`	`true`	`boolean` Whether or not the radio group should loop when navigating with the keyboard.
`required`	`false`	`boolean` Whether or not the radio group is required.
`orientation`	`'vertical'`	`'horizontal' \| 'vertical'` The orientation of the radio group.
`value`	-	`string` The value of the checked radio item.

Returned Props

Returned Prop	Type	Description
`options`	`Writable<CreateRadioGroupProps>`	A writable store that can be used to update the radio group props.
`value`	`Writable<string \| null>`	A writable store that can be used to update the radio group value.
`root`	-	The builder store used to create the radio group root.
`item`	-	The builder store used to create the radio group item.
`itemInput`	-	The builder store used to create the radio group item input.

root

Data Attributes

Data Attribute	Value
`[data-orientation]`	`'vertical' \| 'horizontal'`
`[data-melt-radio-group]`	Present on all radio group elements.

item

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]`	`'checked' \| 'unchecked' \| 'indeterminate'`
`[data-orientation]`	`'vertical' \| 'horizontal'`
`[data-melt-radio-group-item]`	Present on all radio group item elements.

itemInput

Props

Prop	Default	Type / Description
`value` *	-	`string` The value of the radio item.
`disabled`	`false`	`boolean` Whether or not the radio item is disabled.

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