{
  "name": "field",
  "title": "Field",
  "description": "The frame around every form control: label, hint and error wired together, with validity flowing into the control's red glow automatically.",
  "category": "forms",
  "install": {
    "command": "npx shadcn@latest add @clow/field",
    "registryConfig": {
      "@clow": "https://clow.cards/r/{name}.json"
    }
  },
  "agent": {
    "prompt": "Wrap every labeled form control in a Field instead of hand-wiring htmlFor/aria-describedby. Compose: Field (name, and optionally validate/validationMode/required/disabled/invalid) > FieldLabel + FieldControl + FieldDescription and/or FieldError. FieldControl renders a native input; pass render={<Input />} to reuse the styled Clow Input · the field pushes aria-invalid into it, which drives the red glow. FieldError shows the active validation message automatically; pass children plus match (a ValidityState key like 'valueMissing', or true) to control the copy. Inside a Form, the field's name keys server errors.",
    "examples": [
      "<Field name=\"callsign\"><FieldLabel>Callsign</FieldLabel><FieldControl required placeholder=\"KX-7\" render={<Input />} /><FieldDescription>Two letters, a dash, a digit.</FieldDescription><FieldError match=\"valueMissing\">A relay needs a callsign.</FieldError></Field>",
      "<Field name=\"frequency\" validate={(value) => (Number(value) > 148 ? \"Outside the licensed band.\" : null)} validationMode=\"onChange\"><FieldLabel>Frequency (MHz)</FieldLabel><FieldControl type=\"number\" render={<Input />} /><FieldError /></Field>"
    ]
  },
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "utils",
    "input"
  ],
  "links": {
    "docs": "https://clow.cards/docs/field",
    "markdown": "https://clow.cards/llms/field.md",
    "registryItem": "https://clow.cards/r/field.json"
  }
}
Draw

Examples
