Skip to main content

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.

See Bring Your Own Store

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]

'vertical' | 'horizontal'

[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]

'checked' | 'unchecked' | 'indeterminate'

[data-orientation]

'vertical' | 'horizontal'

[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