Components / Forms

Field

The wrapper that ties a label, control, description, and error together. Built on Base UI's Field primitive. Labels support a required flag (bold + asterisk) and an optional hint: a blue question icon that opens a popover for extra detail.

Installation

bash

npx shadcn add https://raw.githubusercontent.com/levi-putna/elements/main/registry/field/registry.json

Also installs label, hint, and popover dependencies.

Basic field

A label, an input, and a description stacked together.

Field · label + input + description

We'll never share your email.

tsx

import { Field, FieldLabel, FieldDescription } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

<Field>
  <FieldLabel>Email</FieldLabel>
  <Input type="email" placeholder="you@example.com" />
  <FieldDescription>We'll never share your email.</FieldDescription>
</Field>

Required

The required prop bolds the label and appends a destructive asterisk.

FieldLabel · required

Full name

tsx

<Field>
  {/* required bolds the label and adds a destructive asterisk */}
  <FieldLabel required>Full name</FieldLabel>
  <Input placeholder="Jane Doe" required />
</Field>

Label hint

Pass a hintto add a blue question icon to the right of the label. Click it to open a popover. When the field is required, the popover shows a “Required” note.

FieldLabel · hint (click the blue icon)

Owners corporation

tsx

<Field>
  {/* hint renders a blue question icon to the right of the label.
      Clicking it opens a popover. When required, the popover shows
      a "Required" note so the label and hint stay in sync. */}
  <FieldLabel
    required
    hint={
      <>
        Use the legal entity name exactly as it appears on your strata roll.
      </>
    }
  >
    Owners corporation
  </FieldLabel>
  <Input placeholder="SP 12345, Harbourview" required />
</Field>

Fieldset

Group related fields with a legend. The legend takes an optional hint too; hints are optional everywhere they appear.

FieldSet · legend with hint + grouped fields

Billing contact

Contact name

Reference

tsx

import { FieldSet, FieldLegend, FieldGroup, Field, FieldLabel } from "@/components/ui/field"

<FieldSet>
  {/* Hints are optional on a fieldset legend too */}
  <FieldLegend hint="Used for levy notices and owner correspondence.">
    Billing contact
  </FieldLegend>
  <FieldGroup>
    <Field>
      <FieldLabel required>Contact name</FieldLabel>
      <Input placeholder="Jane Doe" required />
    </Field>
    <Field>
      <FieldLabel>Reference</FieldLabel>
      <Input placeholder="Optional" />
    </Field>
  </FieldGroup>
</FieldSet>

Field props

Prop	Type	Default	Description
name	string	-	Field name, wired to Base UI's Field/Form context for validation.
disabled	boolean	-	Disables the field and its control.

FieldLabel props

Prop	Type	Default	Description
required	boolean	false	Bolds the label and appends a destructive asterisk.
hint	ReactNode	-	When set, renders a blue Hint icon to the right; clicking opens a popover. Inherits the label's required state.

FieldLegend props

Prop	Type	Default	Description
hint	ReactNode	-	Optional Hint popover beside the legend. Hints are optional on a fieldset.