form-field — wyrd.component.checkbox

Checkbox

Boolean choice control with required, disabled, checked, indeterminate, and one canonical checked-change event.

Install @wyrd-company/react or the Flutter package and use it directly — your DESIGN.md does the styling.

catalog/contracts/checkbox.yml source of truth · verbatim

$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity:  name: Checkbox  tag: wyrd-checkbox  package: wyrd.component.checkbox  title: Checkbox  summary: Boolean choice control with required, disabled, checked, indeterminate, and one canonical checked-change event.relationships:  related-to:    - quality-parity-and-gates    - form-fieldclassification:  category: form-field  composition: single-slot  interactive: truetarget-strategy:  react: required  flutter: requiredsurface:  properties:    - name: is-checked      type:        kind: boolean      required: false      default: false      controlled: true      reflects: true      serializable: true      summary: Checked state of the boolean choice.    - name: is-indeterminate      type:        kind: boolean      required: false      default: false      reflects: true      serializable: true      summary: Mixed state used when a parent choice represents both checked and unchecked descendants.    - name: is-disabled      type:        kind: boolean      required: false      default: false      reflects: true      serializable: true      summary: Prevents editing and exposes disabled platform semantics.    - name: is-required      type:        kind: boolean      required: false      default: false      reflects: true      serializable: true      summary: Marks the choice as required when it participates in a form.  slots:    - name: label      content: true      required: true      cardinality: exactly-one      accepts:        - text        - node      summary: Visible label and accessible-name source.  events:    - name: checked-change      payload:        checked:          kind: boolean        indeterminate:          kind: boolean        action:          kind: action-ref      bubbles: true      composed: true      cancelable: false      summary: Canonical checked-state change event carrying the next checked and indeterminate states.  states:    - name: unchecked      source: property      summary: Enabled state when is-checked is false.    - name: checked      source: property      summary: Enabled state when is-checked is true.    - name: indeterminate      source: property      summary: Mixed state derived from is-indeterminate.    - name: focus-visible      source: platform      summary: Keyboard-visible focus state.    - name: disabled      source: property      summary: Disabled state derived from is-disabled.    - name: required      source: property      summary: Required state derived from is-required.  parts:    - name: root      summary: Label/control row.      slots:        - label    - name: control      summary: Native checkbox control.    - name: label      summary: Label content container.      slots:        - label  tokens:    root:      gap: spacing.sm    control:      size: spacing.md      background: color.surface      background-checked: color.primary      foreground-checked: color.on-primary      border-color: color.outline      border-color-focus: color.primary      border-color-disabled: color.disabled      border-width: 1px      radius: rounded.sm    label:      color: color.on-surface      text: typography.body-mdmessages: []obligations:  accessibility:    role: checkbox    name: Label slot provides the accessible name.    keyboard:      - Space toggles the checkbox when enabled.      - Tab moves focus into and out of the checkbox in document order.    semantics:      - Checked, indeterminate, required, and disabled states are exposed through platform semantics.      - Indeterminate is exposed as mixed on platforms with mixed checkbox semantics.  behavior:    model: input    interactions:      - Activation toggles checked state when the checkbox is enabled.      - Activation from indeterminate clears indeterminate and emits checked-change.    hostEffects:      - Dispatch checked-change event.      - Bind checked state to SDUI form state when present.  conditions:    - rtl    - reduced-motion    - cvd-deuteranopia    - density-compact    - text-expansion  sdui:    status: serializable    serializableProperties:      - is-checked      - is-indeterminate      - is-disabled      - is-required    serializableSlots:      - label    eventBindings:      - checked-change    notes: Checked-change serializes to a named binding/action channel.examples:  - name: unchecked    state: unchecked    properties:      is-checked: false    slots:      label: Accept terms  - name: checked    state: checked    properties:      is-checked: true    slots:      label: Email me updates  - name: indeterminate    state: indeterminate    properties:      is-indeterminate: true    slots:      label: Select all permissions

Examples

Generated from the contract's examples block. Previews are the published @wyrd-company/react component, themed by the brand's role tokens — flip the site's light/dark toggle and they follow.

Code target React Flutter Applies to every example on component pages.

unchecked state: unchecked

Accept terms

Usage

import { WyrdCheckbox } from "@wyrd-company/react";

<WyrdCheckbox isChecked={false}>
  Accept terms
</WyrdCheckbox>

// events: onCheckedChange

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdCheckbox(
  isChecked: false,
  child: Text('Accept terms'),
)

// events: onCheckedChange

checked state: checked

Email me updates

Usage

import { WyrdCheckbox } from "@wyrd-company/react";

<WyrdCheckbox isChecked>
  Email me updates
</WyrdCheckbox>

// events: onCheckedChange

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdCheckbox(
  isChecked: true,
  child: Text('Email me updates'),
)

// events: onCheckedChange

indeterminate state: indeterminate

Select all permissions

Usage

import { WyrdCheckbox } from "@wyrd-company/react";

<WyrdCheckbox isIndeterminate>
  Select all permissions
</WyrdCheckbox>

// events: onCheckedChange

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdCheckbox(
  isIndeterminate: true,
  child: Text('Select all permissions'),
)

// events: onCheckedChange

Properties

Name	Type	Default	Summary
`is-checked`	`boolean`	`false`	Checked state of the boolean choice.
`is-indeterminate`	`boolean`	`false`	Mixed state used when a parent choice represents both checked and unchecked descendants.
`is-disabled`	`boolean`	`false`	Prevents editing and exposes disabled platform semantics.
`is-required`	`boolean`	`false`	Marks the choice as required when it participates in a form.

Slots & events

Slot	Cardinality	Accepts	Summary
`label`	exactly-one	`text, node`	Visible label and accessible-name source.

Event	Payload	Summary
`checked-change`	`checked, indeterminate, action`	Canonical checked-state change event carrying the next checked and indeterminate states.

Tokens

The contract's token bindings. Open the shared contextual sidebar from any example; primary swatches reflect the color you pick there. Error swatches show the active preset's values; editing any knob switches to custom and resets error to TWW · Ink.

Binding	Token
`root.gap`	`spacing.sm`
`control.size`	`spacing.md`
`control.background`	`color.surface`
`control.background-checked`	`color.primary`
`control.foreground-checked`	`color.on-primary`
`control.border-color`	`color.outline`
`control.border-color-focus`	`color.primary`
`control.border-color-disabled`	`color.disabled`
`control.border-width`	`1px`
`control.radius`	`rounded.sm`
`label.color`	`color.on-surface`
`label.text`	`typography.body-md`

States

State	Source	Summary
`unchecked`	property	Enabled state when is-checked is false.
`checked`	property	Enabled state when is-checked is true.
`indeterminate`	property	Mixed state derived from is-indeterminate.
`focus-visible`	platform	Keyboard-visible focus state.
`disabled`	property	Disabled state derived from is-disabled.
`required`	property	Required state derived from is-required.

SDUI

Status: serializable. Checked-change serializes to a named binding/action channel.

Serializable	Members
Properties	`is-checked, is-indeterminate, is-disabled, is-required`
Slots	`label`
Events	`checked-change`

  The Wyrding Way — a contract-first design system. © Wyrd Company 
   Pipeline demo
 Choose an example to inspect its pipeline context.
 Explore the shape of a brand's pipeline input: presets and knobs regenerate the illustrative excerpt below — not a compilable DESIGN.md (see the format reference). Primary swatches update live; accent, shape, density, and ground are excerpt-only; error swatches are preset-derived until any edit switches to custom (TWW · Ink errors). Component previews use the published brand package and the site's light/dark toggle.
 
  Start from
       
 * homages — shown for range, not affiliation.
 
  Tokens
 Primary updates live swatches. Accent, shape, density, and ground appear in the excerpt only. Error swatches follow the preset until you edit a knob — then they reset to TWW · Ink.
  color.primary   #26221A    color.accent   #9C7C14    rounded.md   2px    density   1.0×    ground     
 
   DESIGN.md excerpt illustrative

Examples

Properties

Slots & events

Tokens

States

Accessibility

SDUI