Radio
One choice in a set. Give every radio in the set the same name.
Preview
tsx
import { state } from '@kerf-js/core'import { Radio, Stack } from '@kerf-js/veneer'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 @kerf-js/veneerTry it
Change the controls: the preview and its code update together. The address keeps what you set, so you can link to it.
Live preview
Controls
Codeupdates as you change the controls
import { Radio } from '@kerf-js/veneer'<Radio hint="Fastest, with a moment of downtime.">Replace all at once</Radio>Usage
tsx
import { Radio } from '@kerf-js/veneer'<Radio>Replace all at once</Radio>States
A radio can be checked, disabled, or both.
tsx
import { Radio, Row } from '@kerf-js/veneer'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
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