Radio Group

One choice from a named set, using native radios and a fieldset.

View source Explore Storybook

Interactive preview

Live specimenTry the component

Workspace visibility

TeamEveryone in your workspace.PrivateOnly invited members.Public

Selected: team

Installation

Add editable source to an initialized React project. Set up antiflex/ui first if you are new here.

Terminal

npx antiflex-ui@0.1.0-alpha.2 add radio-group

This site previews the latest workspace styles and motion. The published alpha keeps its released styles until the next npm release.

Usage

React

<RadioGroup label="Visibility" name="visibility" defaultValue="team"
  options={[{ value: "team", label: "Team" }, { value: "private", label: "Private" }]}
/>

API reference

All components forward native attributes, className, and refs to their underlying elements.

Prop	Type	Default
`label / options`	`ReactNode / option[]`	`required`
`value / defaultValue`	`string`	`—`
`onValueChange`	`(value: string) => void`	`—`
`size`	`sm \| md \| lg`	`md`
`orientation`	`horizontal \| vertical`	`vertical`
`description / error`	`ReactNode`	`—`
`required / disabled`	`boolean`	`false`

Accessibility

A native fieldset/legend names the group. Same-name native radios provide arrow-key navigation, a single selection, form submission, and reset. Disabled options are skipped. option.description provides supporting visible text. Controlled value takes precedence over defaultValue; reset controlled state in the application. Ref points to the fieldset.