@slotted/react 0.0.0-stage → 0.1.0-beta.1

package/dist/docs/switch.json

@@ -0,0 +1,458 @@
+{
+  "family": "switch",
+  "ui": "switch",
+  "binding": "react",
+  "catalog": {
+    "group": "Forms",
+    "summary": "Toggle that turns a setting on or off."
+  },
+  "axes": {
+    "size": [
+      "sm",
+      "md",
+      "lg"
+    ],
+    "indicator": [
+      "mark",
+      "none"
+    ],
+    "labelPlacement": [
+      "end",
+      "start"
+    ]
+  },
+  "members": {
+    "switch": {
+      "nativeElement": "input",
+      "defaults": {
+        "size": "md",
+        "indicator": "mark",
+        "labelPlacement": "end",
+        "loading": false
+      },
+      "capabilities": [
+        "checked",
+        "appearance",
+        "size",
+        "placement",
+        "disabled",
+        "loading",
+        "invalid",
+        "required",
+        "readOnly",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "checked",
+        "disabled",
+        "readonly",
+        "invalid",
+        "loading"
+      ],
+      "parts": [
+        "root",
+        "control",
+        "track",
+        "thumb",
+        "label",
+        "description"
+      ]
+    }
+  },
+  "docs": {
+    "switch": {
+      "imports": {
+        "source": "import { Switch, SwitchDefaultsProvider } from '@slotted/react';"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "span, or the element render returns",
+          "required": true,
+          "purpose": "The box. It carries data-ui=\"switch\", the three axes, and data-checked, data-disabled, data-readonly, data-invalid and data-loading. It has no role: ARIA makes the children of a switch presentational, so a root carrying the role would fold the label and the description into the control’s accessible name. className and style reach this element."
+        },
+        {
+          "part": "control",
+          "element": "input[type=checkbox][role=switch]",
+          "required": true,
+          "purpose": "The control. It holds the state, the identifier and every native attribute a consumer writes, such as name, value, form, required, autoFocus and tabIndex. It is transparent and lies over the pill, so a press on the pill is a press on the control. ref reaches this element."
+        },
+        {
+          "part": "track",
+          "element": "span",
+          "required": true,
+          "purpose": "The pill. It paints the ground, the edge and the focus ring, and it is the box the thumb travels inside."
+        },
+        {
+          "part": "thumb",
+          "element": "span",
+          "required": true,
+          "purpose": "The part that moves, and the ground the check is drawn on. It travels on the inline axis, so a right-to-left document mirrors the movement."
+        },
+        {
+          "part": "label",
+          "element": "label",
+          "required": false,
+          "purpose": "The label, from children. It points at the control through for, so it names the switch and a press on it toggles the switch. A switch written without children takes its name from aria-label or from the field’s label."
+        },
+        {
+          "part": "description",
+          "element": "p",
+          "required": false,
+          "purpose": "Help text under the label, from description. It sits outside the label, so it does not join the accessible name and a press on it changes nothing. Its identifier reaches the control through aria-describedby."
+        }
+      ],
+      "api": [
+        {
+          "name": "checked",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "Switch",
+          "description": "The state, owned by the consumer for the life of the component when it is set. Unset, the element owns the state and a native form reset restores it."
+        },
+        {
+          "name": "defaultChecked",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Switch",
+          "description": "The state an uncontrolled switch starts from, read once and written to the element as the native attribute."
+        },
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Switch",
+          "description": "The label, beside the pill. It renders a label element pointing at the control through for, so it names the switch and a press on it toggles the switch."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Switch",
+          "description": "Help text under the label and outside it. It reaches the control through aria-describedby, so it describes the switch and does not name it."
+        },
+        {
+          "name": "size",
+          "type": "'sm' | 'md' | 'lg'",
+          "defaultValue": "md",
+          "appliesTo": "Switch, SwitchDefaultsProvider",
+          "description": "The control step. A field around the switch decides it first, then the defaults provider. The pill, the thumb, the check and the label read the control scales, which the theme restates per density."
+        },
+        {
+          "name": "indicator",
+          "type": "'mark' | 'none'",
+          "defaultValue": "mark",
+          "appliesTo": "Switch, SwitchDefaultsProvider",
+          "description": "What the thumb carries. mark draws a check when the switch is on and nothing when it is off. none draws nothing, and is correct only where text beside the switch states the value."
+        },
+        {
+          "name": "labelPlacement",
+          "type": "'end' | 'start'",
+          "defaultValue": "end",
+          "appliesTo": "Switch, SwitchDefaultsProvider",
+          "description": "Which side of the label the pill sits on. start is the settings row: the label takes the free width and the pill sits at the end of the row."
+        },
+        {
+          "name": "loading",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "Switch",
+          "description": "The value is not settled yet. The switch refuses every press, keeps its size, sets aria-busy, and announces the pending label politely once the wait passes two seconds."
+        },
+        {
+          "name": "messages",
+          "type": "Partial<SwitchMessages>",
+          "defaultValue": "—",
+          "appliesTo": "Switch",
+          "description": "Words that replace the active language’s, key by key: loading is what a screen reader hears while the switch is pending. The words reach a live region, not the control’s name, so the name never changes with the state."
+        },
+        {
+          "name": "disabled",
+          "type": "boolean",
+          "defaultValue": "from the field, or false",
+          "appliesTo": "Switch",
+          "description": "Unset rather than false, so the switch follows the field around it. A stated value wins. It is the native attribute, which takes the switch out of the tab order and out of form submission."
+        },
+        {
+          "name": "readOnly",
+          "type": "boolean",
+          "defaultValue": "from the field, or false",
+          "appliesTo": "Switch",
+          "description": "Unset rather than false. The native readonly attribute does nothing on a checkbox, so the switch sets aria-readonly and refuses every press. It stays focusable, announced and submitted."
+        },
+        {
+          "name": "invalid",
+          "type": "boolean",
+          "defaultValue": "from the field, or false",
+          "appliesTo": "Switch",
+          "description": "Unset rather than false, so the switch follows the field around it. Writes aria-invalid on the control and data-invalid on the root, which draws the edge and the focus ring in the danger tone."
+        },
+        {
+          "name": "required",
+          "type": "boolean",
+          "defaultValue": "—",
+          "appliesTo": "Switch",
+          "description": "The element’s own attribute, passed through unchanged; the switch never writes it. A required field sets aria-required instead, because the native attribute turns on browser constraint validation."
+        },
+        {
+          "name": "name / value / form",
+          "type": "string",
+          "defaultValue": "— / on / —",
+          "appliesTo": "Switch",
+          "description": "The element’s own attributes. The form submits name with value when the switch is on, and nothing when it is off, as it does for a checkbox."
+        }
+      ],
+      "composition": [
+        {
+          "name": "render",
+          "type": "(props: SwitchRootProps) => ReactNode",
+          "defaultValue": "—",
+          "appliesTo": "Switch",
+          "description": "Replaces the root element and hands it every attribute. The props are typed against HTMLAttributes<HTMLElement>, so they can be spread onto a list item or a table cell. The control, the pill and the label are fixed: the control holds the state and the identifier, and the other parts are the switch’s own drawing."
+        },
+        {
+          "name": "ref",
+          "type": "Ref<HTMLInputElement>",
+          "defaultValue": "—",
+          "appliesTo": "Switch",
+          "description": "Reaches the control. focus() and click() are the element’s own, and a click() reaches onCheckedChange with the reason \"programmatic\"."
+        },
+        {
+          "name": "className / style",
+          "type": "string / CSSProperties",
+          "defaultValue": "—",
+          "appliesTo": "Switch",
+          "description": "Reach the root, the element a consumer styles. Every other native prop reaches the control."
+        },
+        {
+          "name": "SwitchDefaultsProvider",
+          "type": "{ size, indicator, labelPlacement }",
+          "defaultValue": "—",
+          "appliesTo": "a subtree",
+          "description": "Sets size, indicator and labelPlacement once for every switch under it. A field outranks the provider’s size, so a switch inside a field takes the field’s step."
+        },
+        {
+          "name": "useField()",
+          "type": "() => FieldContextValue | undefined",
+          "defaultValue": "—",
+          "appliesTo": "inside a Field",
+          "description": "What the switch reads from a field around it: the identifier, the description, and the disabled, read-only, invalid and required states. The switch needs no wiring inside a field."
+        }
+      ],
+      "events": [
+        {
+          "name": "onCheckedChange",
+          "payload": "(checked: boolean, request: ChangeRequest<boolean>)",
+          "when": "Before the switch moves. request.value is the new state and request.previous the state it replaces. request.reason is \"pointer\" for a press, \"keyboard\" for Space or \"programmatic\" for element.click(). request.source is the originating event, and request.cancel() refuses the move before anything commits."
+        },
+        {
+          "name": "onClick, onChange, onFocus, onBlur",
+          "payload": "the element’s own events",
+          "when": "Whenever the element fires them. The switch runs a consumer’s handler before its own, and a click handler that calls preventDefault() refuses the move before onCheckedChange is called."
+        }
+      ],
+      "accessibility": [
+        "The pattern is the Switch of the WAI-ARIA Authoring Practices, built as the third of its reference implementations: an input[type=checkbox] with role=\"switch\". The platform supplies the rest: Space toggles it, the label names it and toggles it, name and value are submitted, form.reset() restores it, and a disabled fieldset disables it.",
+        "The switch writes no aria-checked. The Authoring Practices state that a switch built on a checkbox uses the HTML checked state instead, and writing both would state the value twice in two places that can disagree.",
+        "Enter does not toggle the switch. The Authoring Practices list Enter as optional, and inside a form Enter submits the form, which a switch bound to Enter would prevent. A reader who expects Enter presses Space.",
+        "The root carries no role, because ARIA makes the children of a switch presentational: the label and the description would otherwise join the control’s accessible name. The name of a switch does not change with its state, so the pending label is a live region and not part of the name.",
+        "A required field sets aria-required, never the native required, which would turn on browser constraint validation and change how the form submits; a consumer who wants the native attribute writes required and it reaches the control. disabled is the native attribute. Read-only is aria-readonly plus a refused press, because the native readonly attribute does nothing on a checkbox.",
+        "The target is at least 24 CSS pixels in both axes at every size and every density, as WCAG 2.2 success criterion 2.5.8 requires. The label supplies the height when there is one, and a switch without a label sets the minimum on its own row.",
+        "The description sits outside the label, so it describes the switch and does not name it, and a press on it changes nothing."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-width-thin",
+    "--slotted-control-border-color",
+    "--slotted-control-border-width",
+    "--slotted-control-font-family",
+    "--slotted-control-font-size-lg",
+    "--slotted-control-font-size-md",
+    "--slotted-control-font-size-sm",
+    "--slotted-control-icon-size-lg",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-icon-size-sm",
+    "--slotted-control-invalid-edge-width",
+    "--slotted-control-label-gap-lg",
+    "--slotted-control-label-gap-md",
+    "--slotted-control-label-gap-sm",
+    "--slotted-control-shadow",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-disabled-background",
+    "--slotted-disabled-border",
+    "--slotted-disabled-foreground",
+    "--slotted-duration-loop",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-color-invalid",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-size-xs",
+    "--slotted-line-height-md",
+    "--slotted-line-height-xs",
+    "--slotted-radius-full",
+    "--slotted-space-1",
+    "--slotted-space-3",
+    "--slotted-surface",
+    "--slotted-switch-active-background",
+    "--slotted-switch-border-color",
+    "--slotted-switch-checked-active-background",
+    "--slotted-switch-checked-background",
+    "--slotted-switch-checked-border-color",
+    "--slotted-switch-checked-hover-background",
+    "--slotted-switch-checked-thumb-border-color",
+    "--slotted-switch-color",
+    "--slotted-switch-description-color",
+    "--slotted-switch-description-font-size",
+    "--slotted-switch-disabled-background",
+    "--slotted-switch-disabled-border-color",
+    "--slotted-switch-disabled-color",
+    "--slotted-switch-disabled-mark-color",
+    "--slotted-switch-disabled-thumb-background",
+    "--slotted-switch-hover-background",
+    "--slotted-switch-invalid-border-color",
+    "--slotted-switch-invalid-edge-width",
+    "--slotted-switch-invalid-focus-ring-color",
+    "--slotted-switch-line-height",
+    "--slotted-switch-mark-color",
+    "--slotted-switch-pending-color",
+    "--slotted-switch-radius",
+    "--slotted-switch-readonly-background",
+    "--slotted-switch-readonly-border-color",
+    "--slotted-switch-thumb-background",
+    "--slotted-switch-thumb-border-color",
+    "--slotted-switch-thumb-shadow",
+    "--slotted-switch-track-background",
+    "--slotted-switch-track-inline-size",
+    "--slotted-target-min",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-on-solid",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-solid-active",
+    "--slotted-tone-accent-solid-hover",
+    "--slotted-tone-danger-border",
+    "--slotted-tone-secondary-solid",
+    "--slotted-tone-secondary-solid-active",
+    "--slotted-tone-secondary-solid-hover"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "One switch with every axis on it, driven by the controls below the canvas. Click the label as well as the pill: the label names the control and doubles its target.",
+      "language": "tsx",
+      "source": "<Switch defaultChecked description=\"A fatura é debitada no dia 5 de cada mês.\" name=\"autopay\">\n  Cobrança automática\n</Switch>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "sizes",
+      "title": "The step the control sits at",
+      "note": "Three steps, and inside a field the switch takes the field’s rather than its own: a small field holding a medium control is a field and a control disagreeing about one row.",
+      "language": "tsx",
+      "source": "import { Stack } from '@slotted/react/stack';\nimport { Switch } from '@slotted/react/switch';\n\nexport default function SwitchSizes() {\n  return (\n    <Stack gap={4}>\n      <Switch size=\"sm\" defaultChecked>\n        Show archived orders\n      </Switch>\n      <Switch size=\"md\" defaultChecked>\n        Group orders by warehouse\n      </Switch>\n      <Switch size=\"lg\" defaultChecked>\n        Print packing slips\n      </Switch>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "indicator",
+      "title": "The mark inside the thumb",
+      "note": "On draws a check and off draws nothing, so the state is readable without colour and without comparing the thumb’s position to a switch you cannot see.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Stack } from '@slotted/react/stack';\nimport { Switch } from '@slotted/react/switch';\n\nexport default function SwitchIndicator() {\n  const [open, setOpen] = useState(true);\n\n  return (\n    <Stack gap={5}>\n      <Switch defaultChecked>Accept backorders</Switch>\n      <Switch\n        checked={open}\n        indicator=\"none\"\n        onCheckedChange={setOpen}\n        description={\n          open ? 'Open: customers can place orders.' : 'Closed: customers see a maintenance page.'\n        }\n      >\n        Storefront\n      </Switch>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "placement",
+      "title": "Which side the pill sits on",
+      "note": "start is the settings row every product writes: the label takes the free width, the pill sits at the end, and a column of rows ends with every pill at the same distance from the edge.",
+      "language": "tsx",
+      "source": "import { Stack } from '@slotted/react/stack';\nimport { Switch } from '@slotted/react/switch';\n\nexport default function SwitchPlacement() {\n  return (\n    <Stack gap={5}>\n      <Switch defaultChecked description=\"Paid invoices arrive as PDF attachments.\">\n        Email me a copy of each invoice\n      </Switch>\n      <Switch labelPlacement=\"start\" description=\"Unpaid invoices are flagged on the 5th day.\">\n        Overdue reminders\n      </Switch>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "description",
+      "title": "Help text under the label",
+      "note": "It sits outside the label, so it describes the switch rather than naming it — and so a paragraph of help text does not change a setting when it is clicked.",
+      "language": "tsx",
+      "source": "<Switch defaultChecked description=\"A fatura é debitada no dia 5 de cada mês.\">\n  Cobrança automática\n</Switch>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "states",
+      "title": "The states the pill paints",
+      "note": "Read-only goes hollow and keeps its colour, because the value is real and still submitted; disabled goes grey and its knob goes with it, so a locked setting still says which way it is set.",
+      "language": "tsx",
+      "source": "import { Stack } from '@slotted/react/stack';\nimport { Switch } from '@slotted/react/switch';\n\nexport default function SwitchStates() {\n  return (\n    <Stack gap={5}>\n      <Switch defaultChecked readOnly description=\"Your organization's security policy sets this.\">\n        Two-step sign-in\n      </Switch>\n      <Switch defaultChecked disabled description=\"Included in the Business plan.\">\n        Audit log\n      </Switch>\n      <Switch disabled description=\"Available on the Enterprise plan.\">\n        Single sign-on\n      </Switch>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "loading",
+      "title": "A setting that has not landed yet",
+      "note": "The thumb draws an arc where its mark was, the pill keeps its size so the row does not move, and a second press is refused before the DOM can show a state the server does not have.",
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Switch } from '@slotted/react/switch';\n\n/** Stands in for the request that stores the setting. */\nconst saveSetting = (on: boolean) =>\n  new Promise<boolean>((resolve) => setTimeout(() => resolve(on), 2500));\n\nexport default function SwitchLoading() {\n  const [syncing, setSyncing] = useState(false);\n  const [saving, setSaving] = useState(false);\n\n  const change = async (next: boolean) => {\n    setSaving(true);\n    setSyncing(await saveSetting(next));\n    setSaving(false);\n  };\n\n  return (\n    <Switch\n      checked={syncing}\n      labelPlacement=\"start\"\n      loading={saving}\n      messages={{ loading: 'Saving order sync' }}\n      onCheckedChange={change}\n      description=\"Imports new Shopify orders every five minutes.\"\n    >\n      Order sync\n    </Switch>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "field",
+      "title": "Inside a field",
+      "note": "The switch takes the identifier, the description, the error and the four shared states without being asked, and it writes aria-required rather than the native attribute.",
+      "language": "tsx",
+      "source": "import { Field, FieldDescription, FieldError, FieldLabel } from '@slotted/react/field';\nimport { Stack } from '@slotted/react/stack';\nimport { Switch } from '@slotted/react/switch';\n\nexport default function SwitchField() {\n  return (\n    <Stack gap={5}>\n      <Field>\n        <FieldLabel>Backorders</FieldLabel>\n        <Switch>Accept orders when an item is out of stock</Switch>\n        <FieldDescription>Customers see the restock date at checkout.</FieldDescription>\n      </Field>\n      <Field invalid>\n        <FieldLabel>Sales tax</FieldLabel>\n        <Switch defaultChecked>Collect tax on orders shipped to Nevada</Switch>\n        <FieldError>Add a Nevada tax ID before collecting tax there.</FieldError>\n      </Field>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "settings",
+      "title": "A row on a settings page",
+      "note": "Where a switch actually lives: the label takes the free width, the pill sits at the end of the row, and the description sits under the label rather than under the pill.",
+      "language": "tsx",
+      "source": "import { Card, CardBody, CardHeader } from '@slotted/react/card';\nimport { Divider } from '@slotted/react/divider';\nimport { Stack } from '@slotted/react/stack';\nimport { Switch, SwitchDefaultsProvider } from '@slotted/react/switch';\nimport { Heading, Text } from '@slotted/react/typography';\n\nexport default function SwitchSettings() {\n  return (\n    <Card>\n      <CardHeader>\n        <Heading level={3} size=\"md\">\n          Warehouse notifications\n        </Heading>\n        <Text size=\"sm\" tone=\"muted\">\n          Sent to ops@northwind.example.\n        </Text>\n      </CardHeader>\n      <CardBody>\n        <SwitchDefaultsProvider labelPlacement=\"start\">\n          <Stack gap={4}>\n            <Switch defaultChecked description=\"When a product falls below its reorder point.\">\n              Low stock\n            </Switch>\n            <Divider />\n            <Switch defaultChecked description=\"When a carrier misses its pickup window.\">\n              Late pickups\n            </Switch>\n            <Divider />\n            <Switch description=\"When a count differs from the system by more than 2%.\">\n              Cycle count variances\n            </Switch>\n          </Stack>\n        </SwitchDefaultsProvider>\n      </CardBody>\n    </Card>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "composition",
+      "title": "What a consumer can replace",
+      "note": "The root becomes any element render returns, an application sets the family’s defaults once, and every native attribute a consumer writes lands on the control rather than on the box.",
+      "language": "tsx",
+      "source": "<SwitchDefaultsProvider labelPlacement=\"start\" size=\"sm\">\n  <Switch>Alertas por e-mail</Switch>\n</SwitchDefaultsProvider>;\n\n// The root becomes a list item, so a settings list is a list.\n<Switch render={(props) => <li {...props} />}>Resumo semanal</Switch>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "The keyboard",
+      "note": "Tab reaches the control and Space toggles it, both from the platform. Enter is deliberately not bound: inside a form it submits, and a switch that stole it would break the form.",
+      "language": "tsx",
+      "source": "<Switch\n  onCheckedChange={(next, request) => {\n    // \"pointer\", \"keyboard\" or \"programmatic\".\n    if (request.reason === 'pointer' && next) request.cancel();\n  }}\n>\n  Receber a nota fiscal\n</Switch>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "basic",
+      "title": "basic.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { Switch } from '@slotted/react/switch';\n\nexport default function SwitchBasic() {\n  return (\n    <Switch\n      defaultChecked\n      labelPlacement=\"start\"\n      name=\"lowStockAlerts\"\n      description=\"Email the buyer when a product falls below its reorder point.\"\n    >\n      Low-stock alerts\n    </Switch>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "controlled",
+      "title": "controlled.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport { Stack } from '@slotted/react/stack';\nimport { Switch } from '@slotted/react/switch';\n\nexport default function SwitchControlled() {\n  const [paused, setPaused] = useState(false);\n\n  return (\n    <Stack gap={5}>\n      <Switch\n        checked={paused}\n        labelPlacement=\"start\"\n        onCheckedChange={setPaused}\n        description=\"Turns off the alerts below until you resume.\"\n      >\n        Pause all alerts\n      </Switch>\n      <Stack gap={4}>\n        <Switch defaultChecked disabled={paused} labelPlacement=\"start\">\n          New orders\n        </Switch>\n        <Switch defaultChecked disabled={paused} labelPlacement=\"start\">\n          Failed payments\n        </Switch>\n        <Switch disabled={paused} labelPlacement=\"start\">\n          Return requests\n        </Switch>\n      </Stack>\n    </Stack>\n  );\n}\n",
+      "verdict": "example"
+    },
+    {
+      "id": "form",
+      "title": "form.tsx",
+      "note": null,
+      "language": "tsx",
+      "source": "import { useState } from 'react';\nimport type { SubmitEvent } from 'react';\nimport { Button } from '@slotted/react/button';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport { Switch } from '@slotted/react/switch';\nimport { Text } from '@slotted/react/typography';\n\nexport default function SwitchForm() {\n  const [submitted, setSubmitted] = useState<string | null>(null);\n\n  const submit = (event: SubmitEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    const names = [...new FormData(event.currentTarget).keys()];\n    setSubmitted(names.length > 0 ? names.join(', ') : 'nothing');\n  };\n\n  return (\n    <form onSubmit={submit} onReset={() => setSubmitted(null)}>\n      <Stack gap={4}>\n        <Switch name=\"dailySummary\" defaultChecked labelPlacement=\"start\">\n          Daily sales summary\n        </Switch>\n        <Switch name=\"weeklyForecast\" labelPlacement=\"start\">\n          Weekly demand forecast\n        </Switch>\n        <Switch name=\"supplierDelays\" defaultChecked labelPlacement=\"start\">\n          Supplier delay report\n        </Switch>\n        <Inline gap={3} align=\"center\">\n          <Button type=\"submit\">Save</Button>\n          <Button type=\"reset\" tone=\"secondary\" variant=\"outline\">\n            Reset\n          </Button>\n          {submitted && (\n            <Text size=\"sm\" tone=\"muted\">\n              Submitted {submitted}\n            </Text>\n          )}\n        </Inline>\n      </Stack>\n    </form>\n  );\n}\n",
+      "verdict": "example"
+    }
+  ]
+}