Radio group
Choose one option from a visible set.
npm install https://animui.stracture.net/__local/package.tgzLive · keyboard ready
- Two to six mutually exclusive options that need descriptions, such as plans.
- Form choices that should submit natively through name.
- Use segmented-control for short inline view options.
- Use select for longer lists.
- Use checkbox when several options can be on at once.
Installation
Install animui once, then import any component or block from its typed package entry.
animui · 250 components and blocks
React 19 and React DOM 19 are required. The package includes Free and Pro entries, styles and TypeScript declarations.
npm install https://animui.stracture.net/__local/package.tgzLoad the stylesheet once at your app root, then use the typed component import:
import 'animui/styles.css';
import { RadioGroup } from 'animui/radio-group';Read the Code tab for the implementation files and the API reference below for required props.
Download animui 0.3.0 · Agent guideexample.tsx
import { RadioGroup } from "animui/radio-group"; export function PlanPicker() { const [plan, setPlan] = useState("team"); return ( <RadioGroup label="Plan" name="plan" value={plan} onValueChange={setPlan} options={[ { value: "solo", label: "Solo", description: "One seat" }, { value: "team", label: "Team", description: "Up to 20 seats" }, ]} /> );}RadioGroup
A fieldset of native radios where one highlight glides to the chosen row.
PropTypeDefaultDescription
labelRequiredstring–Rendered as the fieldset legend.optionsRequired{ value: string; label: string; description?: string }[]–Rows in order, each with optional secondary copy.valueRequiredstring–Selected value.onValueChangeRequired(value: string) => void–Called with the chosen value.namestring–Native radio name for form submission. Generated when omitted.- Arrow keys
- Move the selection between options (native radio behavior).
- Tab
- Enters and leaves the group at the selected option.
- Uses a fieldset and legend with native radio inputs wrapped in labels.
- The highlight and dot are aria-hidden decoration.
- One highlight glides to the chosen row on the morph spring while the new dot springs in and the old one shrinks away.
- Reduced motion places the highlight and dot instantly; resizes never animate.
- Rows stack vertically and stretch to the column, so long descriptions wrap cleanly on narrow screens.
- A ResizeObserver re-places the highlight on resize without animating it.
- One shared highlight moves between rows instead of a layout animation per row.
Notes for AI
Give your coding assistant the Markdown reference instead of screenshots.
- Use for two to six mutually exclusive options that need descriptions. Use segmented-control for short inline choices and select for longer lists.
- Always controlled: value and onValueChange are required. Pass name to submit with a form.
The full library index for assistants is at /llms.txt.