primitives

Field

Form-field family — the canonical wrapper for any input + label + description + error in non-auth forms. Use this instead of composing labels and errors by hand so spacing and a11y stay consistent.

`FieldSet` and `FieldLegend` form a labeled section. `FieldGroup` stacks multiple fields with consistent gaps. Each `Field` holds one input and is `vertical` by default; use `horizontal` for compact dense rows or `responsive` for desktop-only horizontal layout. `FieldError` accepts a react-hook-form-style `errors[]` array.

Install

Pull this component (and its dependencies) straight into your app via the shadcn CLI:

npx shadcn@latest add https://design.oapps.io/r/field.json

Or import from the workspace package:

import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel, FieldTitle, FieldDescription, FieldError, FieldSeparator, FieldContent } from "@8maverik8/design";

Examples

Vertical group

Profile

<FieldSet>
  <FieldLegend>Profile</FieldLegend>
  <FieldGroup>
    <Field>
      <FieldLabel htmlFor="email">Email</FieldLabel>
      <Input id="email" type="email" />
      <FieldDescription>We'll only use this for security alerts.</FieldDescription>
    </Field>
    <Field>
      <FieldLabel htmlFor="company">Company</FieldLabel>
      <Input id="company" />
    </Field>
  </FieldGroup>
</FieldSet>

Horizontal checkbox row

Email me product updates

About once a month, never marketing.

<Field orientation="horizontal">
  <Checkbox id="news" />
  <FieldContent>
    <FieldTitle>Email me product updates</FieldTitle>
    <FieldDescription>About once a month, never marketing.</FieldDescription>
  </FieldContent>
</Field>

With error

<Field>
  <FieldLabel htmlFor="slug">Slug</FieldLabel>
  <Input id="slug" aria-invalid defaultValue="bad slug!" />
  <FieldError>Only lowercase letters, numbers and dashes are allowed.</FieldError>
</Field>

Variants

Field orientation

vertical(default)Label above input — default for forms.
horizontalLabel left of input — for dense rows like settings.
responsiveVertical on mobile, horizontal on `@md` — best for settings pages.

Guidelines

Always wrap form inputs in `Field` — even for a single input.It guarantees the right gap, label spacing, and error rendering across the whole product.
Build forms by hand-stacking `<Label>` + `<Input>` + `<p>` for the error.