Field

Installation

pnpm dlx shadcn@latest add @spaceui/primitives-field

Usage

import { Field, FieldDescription, FieldError, FieldLabel, FieldValidity } from '@/components/ui/field'
import { Input } from '@/components/ui/input'

<Field>
  <FieldLabel>Name</FieldLabel>
  <Input type="text" placeholder="Enter your name" />
  <FieldDescription>Visible on your profile</FieldDescription>
  <FieldError>Please enter a valid name</FieldError>
  <FieldValidity>
    {(validity) => (
      {validity.error && <p>{validity.error}</p>}
    )}
  </FieldValidity>
</Field>

Anatomy

<Field>
  <FieldLabel />
  <FieldControl />
  <FieldDescription />
  <FieldError />
</Field>

Features

Disabled State

Field component rendered in a disabled state via the disabled prop.

API Reference

Field

Root component. Styled wrapper for Field.Root from Base UI with flex column layout.

FieldLabel

Label for the field. Styled wrapper for Field.Label from Base UI.

FieldItem

Container for field items. Styled wrapper for Field.Item from Base UI.

FieldDescription

Description text for the field. Styled wrapper for Field.Description from Base UI with muted foreground color.

FieldError

Error message for the field. Styled wrapper for Field.Error from Base UI with destructive foreground color.

FieldControl

Alias for Field.Control from Base UI. Use this to register a custom or third-party control with the field context so it participates in labelling, validation, and error state.

Note that Textarea does not require FieldControl — it wraps Field.Control internally and integrates with Field the same way Input and other built-in controls do.

FieldValidity

Alias for Field.Validity from Base UI.

FieldGroup

Container for grouping multiple field components together with vertical spacing. Renders as a styled div.

FieldSeparator

Visual separator between fields or sections within a field group.

Examples