Field

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

Installation

pnpmnpmyarnbun
pnpm dlx shadcn@latest add https://nusa-ui.vercel.app/r/field.json

Usage

Copyimport {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"

Copy<Field>
  <FieldLabel htmlFor="username">Username</FieldLabel>
  <Input id="username" />
  <FieldDescription>Your public display name.</FieldDescription>
</Field>

Examples

Horizontal Layout

Use orientation="horizontal" for inline layouts like checkboxes.

import { Checkbox } from "@/registry/ui/checkbox"
import {
  Field,

With Error

Add data-invalid="true" to Field and aria-invalid="true" to the input for error states.

import {
  Field,
  FieldDescription,

API Reference

Field

FieldLabel

A styled label that automatically associates with form controls.

FieldDescription

Helper text displayed below the input.

FieldError

Error message container with accessible alert role.

FieldContent

Wrapper for grouping label and description in horizontal layouts.