Radio

A controlled radio group with accessible markup, custom visual styling, and support for hints and disabled states.

Installation

npx dafink-ui add radio

Demo

StarterUp to 5 users

ProUp to 50 users

EnterpriseUnlimited users

Composition

</RadioGroup>

Props

Name	Type	Default	Description
name	string	-	Shared name attribute applied to all radio inputs in the group.
value	string	-	Currently selected value (controlled).
onValueChange	(v: string) => void	-	Callback fired when the user selects a new option.
className	string	""	Additional classes on the group wrapper.

Accessibility

RadioGroup renders role="radiogroup" around native, visually-hidden (sr-only) <input type="radio"> elements that all share one name, so the browser treats the whole group as a single Tab stop: Tab lands on the selected item (or the first enabled item if none is selected) rather than stepping through every item. Arrow keys are handled in JS rather than left to default browser radio behavior: they move focus between enabled items, wrapping at the ends, but do not themselves select an item — a focused item only becomes selected on Enter/Space (or click), which is a deliberate divergence from an uncontrolled native radio group where arrow keys select immediately. aria-checked mirrors the controlled state on each input.

Key	Function
`tab`	Moves focus to the group, landing on the selected item (or first enabled item if none selected), or out to the next tabbable element if focus is already inside.
`shift`+`tab`	Moves focus out of the group to the previous tabbable element.
`right arrow`	Moves focus to the next enabled item, wrapping from the last to the first, without selecting it.
`down arrow`	Moves focus to the next enabled item, wrapping from the last to the first, without selecting it.
`left arrow`	Moves focus to the previous enabled item, wrapping from the first to the last, without selecting it.
`up arrow`	Moves focus to the previous enabled item, wrapping from the first to the last, without selecting it.
`enter`	Selects the focused item.
`space`	Selects the focused item.