Field

Install

pnpm dlx shadcn@latest add @namche/field

Usage

import { Input } from '@/components/ui/input';
import { Field, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSet } from '@/components/ui/field';

<FieldSet>
  <FieldLegend>Cluster configuration</FieldLegend>
  <FieldGroup>
    <Field>
      <FieldLabel htmlFor="cluster-name">Cluster name</FieldLabel>
      <Input id="cluster-name" placeholder="inference-eu-west" />
      <FieldDescription>Lowercase letters, numbers and hyphens only.</FieldDescription>
    </Field>
  </FieldGroup>
</FieldSet>

Field doesn't render a form control itself — it lays out whatever you put inside it (Input, Checkbox, Switch, RadioGroup, …) alongside a FieldLabel and FieldDescription. orientation (vertical | horizontal | responsive) controls whether the label sits above or beside the control; for a horizontal field with its own label/description pairing, wrap those two in FieldContent so they stack while the control sits alongside. Mark a field invalid with data-invalid="true" and render the message with FieldError, which also accepts a React Hook Form-style errors array and de-duplicates messages automatically. FieldSeparator draws a labelled or bare divider between groups, and FieldSet/FieldLegend group multiple fields under one heading.