form-field — wyrd.component.switch

Switch

Binary form control that exposes checked state and emits 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/switch.yml source of truth · verbatim

$schema: https://thewyrdingway.dev/schemas/component-contract.schema.ymlcontractVersion: 0.1.0identity:  name: Switch  tag: wyrd-switch  package: wyrd.component.switch  title: Switch  summary: Binary form control that exposes checked state and emits one canonical checked-change event.relationships:  related-to:    - quality-parity-and-gatesclassification:  category: form-field  composition: multi-slot  interactive: truetarget-strategy:  react: required  flutter: requiredsurface:  properties:    - name: checked      type:        kind: boolean      required: false      default: false      controlled: true      serializable: true      summary: Controlled checked state.    - name: default-checked      type:        kind: boolean      required: false      default: false      serializable: true      summary: Initial uncontrolled checked state.    - name: is-disabled      type:        kind: boolean      required: false      default: false      reflects: true      serializable: true      summary: Prevents toggling and exposes disabled platform semantics.    - name: is-required      type:        kind: boolean      required: false      default: false      reflects: true      serializable: true      summary: Marks the switch as required in form semantics.  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        action:          kind: action-ref      bubbles: true      composed: true      cancelable: false      summary: Canonical checked-state change event carrying the next boolean value.  states:    - name: default      source: platform      summary: Enabled unchecked state.    - name: checked      source: property      summary: Checked state derived from checked or default-checked.    - 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 inline container.      slots:        - label    - name: control      summary: Interactive switch control.    - name: track      summary: Switch track.    - name: thumb      summary: Switch thumb.    - name: label      summary: Label content container.      slots:        - label  tokens:    root:      gap: spacing.sm    track:      width: spacing.xl      height: spacing.lg      radius: rounded.full      background-unchecked: color.outline      background-checked: color.primary      background-disabled: color.disabled    thumb:      size: spacing.md      background-unchecked: color.surface      background-checked: color.on-primary      background-disabled: color.on-disabled    label:      color: color.on-surface      text: typography.label-md    focus:      color: color.primary      width: 2px      offset: 2pxmessages: []obligations:  accessibility:    role: switch    name: Label slot provides the accessible name.    keyboard:      - Space toggles the switch.      - Tab moves focus into and out of the switch in document order.    semantics:      - Checked, required, and disabled states are exposed through platform semantics.      - The accessible name remains stable as the checked state changes.  behavior:    model: input    interactions:      - Toggling emits checked-change with the next boolean value.      - Disabled switches do not toggle or emit checked-change.    hostEffects:      - Dispatch checked-change event.      - Bind checked to SDUI form state when present.  conditions:    - rtl    - reduced-motion    - cvd-deuteranopia    - density-compact    - text-expansion  sdui:    status: serializable    serializableProperties:      - checked      - default-checked      - is-disabled      - is-required    serializableSlots:      - label    eventBindings:      - checked-change    notes: Checked-change serializes to a named binding/action channel.examples:  - name: unchecked    state: default    properties:      checked: false    slots:      label: Email notifications  - name: checked    state: checked    properties:      default-checked: true    slots:      label: Email notifications  - name: disabled    state: disabled    properties:      checked: true      is-disabled: true    slots:      label: Email notifications

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: default

Email notifications

Usage

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

<WyrdSwitch checked={false}>
  Email notifications
</WyrdSwitch>

// events: onCheckedChange

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdSwitch(
  checked: false,
  child: Text('Email notifications'),
)

// events: onCheckedChange

checked state: checked

Email notifications

Usage

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

<WyrdSwitch defaultChecked>
  Email notifications
</WyrdSwitch>

// events: onCheckedChange

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdSwitch(
  defaultChecked: true,
  child: Text('Email notifications'),
)

// events: onCheckedChange

disabled state: disabled

Email notifications

Usage

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

<WyrdSwitch checked isDisabled>
  Email notifications
</WyrdSwitch>

// events: onCheckedChange

import 'package:wyrd_flutter/wyrd_flutter.dart';

WyrdSwitch(
  checked: true,
  isDisabled: true,
  child: Text('Email notifications'),
)

// events: onCheckedChange

Properties

Name	Type	Default	Summary
`checked`	`boolean`	`false`	Controlled checked state.
`default-checked`	`boolean`	`false`	Initial uncontrolled checked state.
`is-disabled`	`boolean`	`false`	Prevents toggling and exposes disabled platform semantics.
`is-required`	`boolean`	`false`	Marks the switch as required in form semantics.

Slots & events

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

Event	Payload	Summary
`checked-change`	`checked, action`	Canonical checked-state change event carrying the next boolean value.

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`
`track.width`	`spacing.xl`
`track.height`	`spacing.lg`
`track.radius`	`rounded.full`
`track.background-unchecked`	`color.outline`
`track.background-checked`	`color.primary`
`track.background-disabled`	`color.disabled`
`thumb.size`	`spacing.md`
`thumb.background-unchecked`	`color.surface`
`thumb.background-checked`	`color.on-primary`
`thumb.background-disabled`	`color.on-disabled`
`label.color`	`color.on-surface`
`label.text`	`typography.label-md`
`focus.color`	`color.primary`
`focus.width`	`2px`
`focus.offset`	`2px`

States

State	Source	Summary
`default`	platform	Enabled unchecked state.
`checked`	property	Checked state derived from checked or default-checked.
`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	`checked, default-checked, 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