Radio
One choice in a set. Give every radio in the set the same name.
SourcePackage @weft-js/warpPlayground
Preview
tsx
import { state } from '@weft-js/core'import { Radio, Stack } from '@weft-js/warp'export function Strategy() { const how = state('rolling') return ( <Stack gap="tight"> <Radio name="strategy" checked={how.value === 'rolling'} hint="One copy at a time, no downtime." onChange={() => (how.value = 'rolling')}>Rolling</Radio> <Radio name="strategy" checked={how.value === 'canary'} hint="5% of traffic first, then everyone." onChange={() => (how.value = 'canary')}>Canary</Radio> <Radio name="strategy" checked={how.value === 'all'} hint="Fastest. Drops requests for a moment." onChange={() => (how.value = 'all')}>All at once</Radio> </Stack> )}Installation
npm install @weft-js/warpUsage
tsx
import { Radio } from '@weft-js/warp'<Radio>Replace all at once</Radio>States
A radio can be checked, disabled, or both.
tsx
import { Radio, Row } from '@weft-js/warp'export function States() { return ( <Row gap="section" wrap> <Radio name="states-off">Canary</Radio> <Radio name="states-on" checked>Canary</Radio> <Radio name="states-off-d" disabled>Canary</Radio> <Radio name="states-on-d" checked disabled>Canary</Radio> </Row> )}When to use
Use it for
- You need your own layout around each choice
Reach for something else
- RadioGroup, when a plain list will do, which is most of the time
Playground
import { Radio } from '@weft-js/warp'<Radio hint="Fastest, with a moment of downtime.">Replace all at once</Radio>Accessibility
- ↑↓
- Moves to the next choice and picks it
- Tab
- Moves in and out of the set
- These are real radios, so arrow keys and form values work as usual.
- Wrap a hand-built set in an element with
role="radiogroup"and a name.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
hint | unknown | — | A short line under the label. |
children | unknown | — | What it contains. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="radio"] [data-part="control"]
controllabelhint
RelatedRadio groupCheckboxSegmented