Inputs / RadioGroup
RadioGroup
Radios fill with an ink blob. A fieldset of real radio inputs.
Client componentWCAG AASince v0.1
import { RadioGroup, Radio } from "@plop-ui/react";
<RadioGroup legend="Priority" defaultValue="medium">
<Radio value="low">Low</Radio>
<Radio value="medium" dotColor="var(--plop-mustard)">Medium</Radio>
<Radio value="high" dotColor="var(--plop-tomato)">High, page everyone</Radio>
</RadioGroup>Change every prop live in the playground.
Props
RadioGroup
| Prop | Type | Default | What it does |
|---|---|---|---|
| children required | ReactNode | — | — |
| legend required | ReactNode | — | The question, shown as the fieldset's legend. |
| className | string | none | — |
| defaultValue | string | none | — |
| disabled | boolean | false | — |
| name | string | a generated one | Form field name. |
| onValueChange | (value: string) => void | none | — |
| value | string | none | — |
| vertical | boolean | true | Stack options vertically. |
Radio
| Prop | Type | Default | What it does |
|---|---|---|---|
| children required | ReactNode | — | — |
| value required | string | — | — |
| disabled | boolean | false | — |
| dotColor | string | ink | Color of the ink blob, as a CSS color or token variable. |
Use it well
DoUse it for 2 to 5 choices people should see all at once.
Don'tLeave a group with nothing selected when one answer is the sensible default.
Accessibility
- A <fieldset> and <legend> holding native radios.
- Arrow keys move between options, as with any radio group.