YesNo
Two segmented buttons with radio semantics for yes_no fields.
A segmented control with two options. The value is a boolean; the words come from the schema's options (exactly two, yes first) when set, otherwise "Yes" and "No". Field renders it for yes_no.
Preview
Usage
// { key: 'has_team', type: 'yes_no', label: 'Do you work with a team?', options: ['Yes, a team', 'Just me'], required: true }
import { Form } from 'kibbleforms';
<Form schema={intake} client={kibble} />
// by hand, overriding the words for this render only:
import { YesNo } from 'kibbleforms';
<YesNo name="has_team" yesLabel="Team" noLabel="Solo" />
Props
| Prop | Type | Default | Description |
|---|---|---|---|
name |
string |
required | The field key. |
yesLabel |
string |
options[0] label, else "Yes" |
Overrides the text of the true segment. |
noLabel |
string |
options[1] label, else "No" |
Overrides the text of the false segment. |
className |
string |
segmented group classes (inline-flex w-full max-w-xs …) |
Merged onto the group element. |
…<div> attributes |
Spread on the group element (except onChange). |
Rendered: <div id role="radiogroup" tabindex="-1" aria-labelledby data-kb="yesno"> with two <button type="button" role="radio" aria-checked data-value="true|false">.
A yes_no field that is required must be answered; an unanswered optional field submits null. (For "must be yes", use a consent field.)
Variants and states
- Checked: the segment lifts onto
--kb-bgwith a small shadow; the other stays muted. - Error:
aria-invalidon the group plus the message below. - Prefill:
defaultValue: true.
Customization
- Tokens:
--kb-muted(track),--kb-bg(selected segment),--kb-fg/--kb-muted-fg(text),--kb-border,--kb-ring,--kb-radius(segments useradius - 2px). className="max-w-none"makes it full width;classNames={{ segment: '…' }}onFormstyles each button.- CSS hooks:
[data-kb="yesno"],[data-kb="yesno"] [role="radio"][aria-checked="true"],[data-value="true"].
Accessibility
Radio semantics without native radios: role="radiogroup" + role="radio"/aria-checked, roving tabindex (one segment is tabbable), and Left/Right/Up/Down/Home/End move the selection and focus.