YesNo

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 '@trymirio/mirio';

<Form schema={intake} client={mirio} />

// by hand, overriding the words for this render only:
import { YesNo } from '@trymirio/mirio';
<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-mirio="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 --mirio-bg with a small shadow; the other stays muted.
• Error: aria-invalid on the group plus the message below.
• Prefill: defaultValue: true.

#Customization

• Tokens: --mirio-muted (track), --mirio-bg (selected segment), --mirio-fg / --mirio-muted-fg (text), --mirio-border, --mirio-ring, --mirio-radius (segments use radius - 2px).
• className="max-w-none" makes it full width; classNames={{ segment: '…' }} on Form styles each button.
• CSS hooks: [data-mirio="yesno"], [data-mirio="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.

#Related

Choice, Consent, Rating, Schema: field types