Field - Saturation UI

Installation

pnpm dlx shadcn@latest add @saturation-ui/field

Tailwind v4 — Source Scanning

The public shadcn registry installs component source into your project. If Tailwind v4 isn't scanning your components directory, add this to your CSS entry file:

@source "../components";

This ensures all utility classes in CVA variants and data attribute selectors are included in your build.

Usage

import { Field } from "@/components/ui/field"

<Field label="Email" error="Invalid email">
  <Input type="email" />
</Field>

Examples

With Textarea

Field wrapping textarea.

With Select

Field wrapping select.

With Slider

Field wrapping slider.

With Checkbox

Field wrapping checkbox.

With Radio Group

Field wrapping radio group.

With Switch

Field wrapping switch.

Field Group

Grouped fields.

With Validation

Field with error state.

API Reference

Prop	Type	Default	Description
`label`	`string`	—	Field label text.
`error`	`string`	—	Error message to display.
`description`	`string`	—	Help text below the input.

Accept terms and conditions

You agree to our Terms of Service and Privacy Policy.