{
  "example": "{`import { Field, Switch } from \"@godxjp/ui/data-entry\";\n\nexport function NotifyRow() {\n  return (\n    <Field id=\"notify\" label=\"メール通知\" description=\"重要な更新をメールで受け取る\">\n      <Switch id=\"notify\" defaultChecked />\n    </Field>\n  );\n}`}",
  "group": "data-entry",
  "importPath": "@godxjp/ui/data-entry",
  "name": "Field",
  "props": [
    {
      "description": "id wired to the control via htmlFor; pass the same id to the child control.",
      "name": "id",
      "type": "string"
    },
    {
      "description": "The field label, rendered as a <Label>.",
      "name": "label",
      "type": "ReactNode"
    },
    {
      "description": "Content rendered BESIDE the label and OUTSIDE the <label> element — a help button, a Tooltip trigger, a status chip, a short text action. Same semantics as FormField.labelAddon. It must not go through `label`: Field's label is a real <label htmlFor> pointing at the checkbox/radio/switch, so a browser forwards a click anywhere inside it to that control and an interactive addon placed there TOGGLES the control when pressed (gh#812). A non-interactive mark (Badge as=\"span\") is still fine inside `label`.",
      "name": "labelAddon",
      "type": "ReactNode"
    },
    {
      "description": "Muted hint rendered under the label, announced with the control via aria-describedby. Composes with `error` — both lines stack, they do not replace each other.",
      "name": "description",
      "type": "ReactNode"
    },
    {
      "description": "Validation message under the description (role=alert). The message IS the invalid state: the control is cloned with aria-invalid, and the message id reaches it through aria-errormessage AND aria-describedby (react-aria's hidden input drops the former). This is how a validated boolean stays in Field — FormField must not wrap a bare Switch.",
      "name": "error",
      "type": "ReactNode"
    },
    {
      "description": "The control (Checkbox/Radio/Switch) placed beside the label.",
      "name": "children",
      "type": "ReactNode"
    },
    {
      "description": "Extra CSS classes on the wrapper.",
      "name": "className",
      "type": "string"
    }
  ],
  "related": [
    "FormField — block label/helper/required layout for text inputs; use it instead when the control stacks under its label. Field now carries `labelAddon` and `error` with FormField's semantics, so the two read as one idea (gh#812); what Field still does NOT have is `required`, `helper`, `name`/error-bag binding, layout/width knobs and `staticText`.",
    "Switch / Checkbox / Radio — the controls Field typically wraps."
  ],
  "rules": [
    23
  ],
  "tagline": "Label + optional description laid out beside a single checkbox/radio/switch control — the inline alternative to FormField's full block layout.",
  "usage": [
    "DO: Use Field to label a single boolean/choice control (Switch, Checkbox, Radio) in a compact two-column row — control beside label + description.",
    "DO: Match the child control's id to Field's id so the label is correctly associated.",
    "DO: Pass a pressable help affordance (Tooltip trigger, icon Button) through `labelAddon`, never through `label` — inside the <label> a press toggles the control (gh#812).",
    "DO: Use `error` for a validated boolean instead of hand-wiring aria-invalid / aria-describedby or smuggling the message through `description`. Field wires aria-invalid, aria-errormessage and aria-describedby onto the control itself.",
    "DON'T: Use Field for text inputs needing the full block label/required/helper layout — use FormField instead. There is no ChoiceField anymore; Field is the canonical name."
  ],
  "useCases": [
    "A settings list of toggle rows (notifications, auto-save) where each Switch has a label + description.",
    "A consent checkbox with an explanatory description beside it.",
    "A radio option row in a preferences form."
  ]
}