Radio

Custom-styled radio button for mutually exclusive selections. Uses native radio input with enhanced styling for better UX and accessibility.

Component Props

Prop	Type	Default	Description
`name`	string	required	Radio group name (same for all options)
`value`	mixed	required	Unique value for this radio option
`checked`	bool	false	Initial checked state
`disabled`	bool	false	Disabled state
`ariaLabel`	string	null	Accessible label for standalone usage
`class`	string	''	Additional wrapper classes

Radio Group Example

Select Notification Method

Email notifications

SMS text messages

Push notifications

No notifications

States

Unselected

Option 1

Default unselected state

Selected

Option 2

Selected state with inner dot

Disabled (Unselected)

Unavailable option

Disabled and unselected

Disabled (Selected)

Locked selection

Disabled and selected

Real-World Examples

Risk Level Filter

All levels

High risk only

Medium risk and above

Alert Time Range

Last 24 hours

Last 7 days

Last 30 days

Usage Example

Radio Group

<fieldset>
    <legend>Choose one option</legend>
    <x-building-blocks.radio name="choice" value="1" :checked="true">
        Option 1
    </x-building-blocks.radio>
    <x-building-blocks.radio name="choice" value="2">
        Option 2
    </x-building-blocks.radio>
</fieldset>

Best Practices

Do:

Use radio buttons for mutually exclusive options (only one can be selected)
Always wrap radio groups in a fieldset with a legend
Use the same name for all radios in a group
Provide unique values for each radio option
Pre-select a sensible default when appropriate

Don't:

Don't use radios for multiple selections (use checkboxes)
Don't use radios for binary on/off (use toggle/switch)
Don't use radios for more than 7 options (consider select)
Don't forget to group related radios with fieldset