Radio Group A set of checkable buttons, where only one of the buttons can be selected at a time.
Headless Styled We have two different versions for the Radio Group. A more classical (RadioGroupRegular) one that might be better for use inside forms, and a more fancy one (RadioGroup). They have slightly different APIs, so reference the API section below to see how to implement them.
You can change the active and inactive colors with the bgActiveStyles and bgStyles props.
You can change the active icon that is used when an option is selected, by passing an icon through the activeIcon prop.
You can change the size of the groups with the size prop by selecting sm, md, or lg.
Props Events Slots
Set the aria label of the radio group.
Name attribute of radio inputs.
The group to bind to. Use this to set the default selected value here.
size
:
RadioItemSize
=
'md'
Set the size of the radio buttons. Options: 'sm' | 'md' | 'lg'.
Set the active icon that appears when an item is selected. Example: 'i-material-symbols-check-circle-outline text-on-primary'.
disabled
:
boolean
=
false
Allows you to disable the radio group.
required
:
boolean
=
false
Define whether or not the radio group is required (for forms).
Define whether or not the focus should loop back to the first item when the last item is reached.
rootStyles
:
string
=
'flex gap-2'
Set the root styles for positioning the items.
bgActiveStyles
:
string
=
'primary-500'
Set active background classes.
bgStyles
:
string
=
'surface-500-50'
Set in-active background classes.
Set the aria label of the radio group.
orientation
:
RadioGroupOrientation
=
'vertical'
Set the orientation.
Define the default value with the checked state. You can also bind to this prop.
radioItems
:
RegularRadioItem[]
Define the available options.
disabled
:
boolean
=
false
Allows you to disable the radio group.
required
:
boolean
=
false
Define whether or not the radio group is required (for forms).
Define whether or not the focus should loop back to the first item when the last item is reached.
size
:
RadioItemSize
=
'md'
Set the size of the radio items.
activeColor
:
string
=
'bg-primary-500'
Set the active color.
backgroundStyles
:
string
=
'bg-surface-100-50 hover:bg-primary-100'
Set the background color.
activeBackgroundStyles
:
string
=
'bg-primary-100 hover:bg-primary-300'
Set the active background color.
labelStyles
:
string
=
'capitalize leading-none text-surface-900-50'
Set the label styles.