Field

Connects labels, controls, descriptions, and validation messages.

Installation

Install Field from Oros with shadcn CLI 4.13.0.

pnpm dlx shadcn@4.13.0 add @oros/field

Usage

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

Open the Source tab in the preview for a complete working example.

Anatomy

Export	Responsibility
Field	The root component that owns the primary structure and state.
FieldLabel	Provides a visible label for its related control or value.
FieldDescription	Provides supporting context for the current region.
FieldError	A composable part of the component anatomy.
FieldGroup	Groups related items into one logical set.
FieldLegend	A composable part of the component anatomy.
FieldSeparator	Visually and semantically separates related groups.
FieldSet	A composable part of the component anatomy.
FieldContent	Contains the primary visible content.
FieldTitle	Provides the visible heading for the current region.

API Reference

Field exports 10 named entries. Component exports accept the props of their underlying HTML element or Base UI component, plus an optional className, unless the source defines a more focused type.

Field Component
FieldLabel Component
FieldDescription Component
FieldError Component
FieldGroup Component
FieldLegend Component
FieldSeparator Component
FieldSet Component
FieldContent Component
FieldTitle Component

Accessibility

Provide Field with a visible label or an equivalent programmatic accessible name.
Expose disabled, required, selected, and invalid states through the component API instead of color alone, and keep keyboard focus visible.

Source

Field uses the standard shadcn API and is distributed through Oros. Installing it adds the component source and required dependencies to your app. The Source tab above shows a complete usage example.

Migrating from COSS? Install field in place of fieldset.

Empty Form