Field

A composable component for building form fields with labels, descriptions, and errors.

Installation

›pnpm dlx shadcn@latest add @evolphin/field

Usage

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

<Field>
  <FieldLabel>Username</FieldLabel>
  <Input placeholder="Enter your username" />
  <FieldDescription>This is your public display name.</FieldDescription>
  <FieldError>Username is required.</FieldError>
</Field>

Type Definitions

interface FieldProps {
  /** The orientation of the field */
  orientation?: "vertical" | "horizontal" | "responsive";     
FieldProps.orientation?: "vertical" | "horizontal" | "responsive" | undefined
The orientation of the field
}

Examples

Default (Vertical)

Horizontal

Notifications

Grouped Fields

Settings

Airplane Mode

Wi-Fi

Bluetooth

API Reference

Prop	Type	Default	Description
`orientation`	`"vertical" \	"horizontal" \	"responsive"`
`className`	`string`	-	Additional CSS classes

FieldLabel

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

FieldDescription

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

FieldError

Prop	Type	Default	Description
`errors`	`Array<{ message?: string }>`	-	Array of error objects to display.
`className`	`string`	-	Additional CSS classes

FieldSet

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

FieldLegend

Prop	Type	Default	Description
`variant`	`"legend" \	"label"`	`"legend"`
`className`	`string`	-	Additional CSS classes

FieldGroup

Prop	Type	Default	Description
`className`	`string`	-	Additional CSS classes

FieldSeparator

Prop	Type	Default	Description
`children`	`React.ReactNode`	-	Optional content (e.g., text) to display in the separator.
`className`	`string`	-	Additional CSS classes

Search

Field

On this page