Radio Group

@sushindustries/ui

Radios in a fieldset - the one grouping screen readers announce without help.

4 min read
View as MarkdownEdit on GitHub

Props

PropTypeDefaultDoes
labelstring-Group label, announced with the set.
optionsreadonly RadioOption[]-Empty renders a legend and nothing else. Values must be unique in the set.
value?string-Controlled selection. Set it and nothing moves until onChange comes back.
defaultValue?string-Uncontrolled starting selection. Ignored once value is set.
onChange?(value: string) => void-Handed the option's value, not the event.
name?string-The shared radio name. A generated id when absent, so two groups on one page never merge.

Notes

value and defaultValue are mutually exclusive in practice, not just in naming - once value is set the group is controlled, defaultValue is ignored, and nothing moves until onChange returns a new value. Passing both is the same trap as a native controlled input: pick one.

name only needs setting by hand when two groups must share one radio name on purpose, or when a specific name matters for form submission. Left absent, the generated id keeps two RadioGroups on the same page from merging into one set.