Field

A form field component with label, description, and validation.

API Reference

Preview

Installation

Usage

import { Field, FieldLabel, FieldDescription, FieldError } 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>

API Reference

Field

Root component. Styled wrapper for Field.Root from Base UI.

All props from Base UI Field are also supported, including invalid and disabled.

FieldLabel

Label for the field. Alias for Field.Label from Base UI.

FieldDescription

Description text below the field. Alias for Field.Description from Base UI.

FieldError

Error message displayed when the field is invalid. Alias for Field.Error from Base UI.

FieldGroup

Container for grouping multiple fields with vertical flex layout.

Fieldset

Root fieldset component. Alias for Fieldset.Root from Base UI.

FieldsetLegend

Legend for a fieldset. Alias for Fieldset.Legend from Base UI.

FieldsetDescription

Description text for a fieldset.

Examples

With Description

With Error

Validity

Horizontal

Fieldset

Disabled

Autocomplete

Combobox

Combobox Multiple

Textarea

Select

Checkbox

Checkbox Group

Radio Group

Switch

Slider

Number Field

Complete Form