Saturation UIsaturation UI
DocsComponentsBlocks
⌘K

Getting Started

IntroductionInstallationTheming

Components

AccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendarCardChartCheckboxCollapsibleComboboxCommandContext MenuData TableDate PickerDialogDropdown MenuEmptyFieldGlow EffectInputInput GroupItemKbdMenubarNovel EditorPaginationProgressive BlurProgressSelectSheetSkeletonSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Components
/
Field

Field

Compose accessible form fields with labels, descriptions, and validation messages.

Preview

Profile

This information will be displayed publicly.

This appears on invoices and emails.

Choose another username.

Installation

npx shadcn@latest add https://ui.saturation.io/r/field.json

Usage

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

Examples

With Textarea

Write a short introduction about yourself.

With Select

Select your department or area of work.

With Slider

Set your budget range ($200 - $800).

With Checkbox

Your Desktop & Documents folders are being synced with iCloud Drive.

With Radio Group

Notification Method

Receive notifications via email.

Receive notifications via text message.

With Switch

Enable multi-factor authentication for added security.

Field Group

Responsive Layout

With Validation

Enter a valid email address.

API Reference

Field

The core wrapper for a single field with orientation control.

orientation?: "vertical" | "horizontal" | "responsive"

FieldSet

Semantic fieldset container for grouping related fields.

FieldLegend

Legend element for a FieldSet with variant options.

variant?: "legend" | "label"

FieldGroup

Layout wrapper that stacks Field components and enables container queries.

FieldContent

Flex column that groups label and description together.

FieldError

Displays validation error messages with proper styling.

errors?: Array<{ message?: string }>

On This Page

  • Preview
  • Installation
  • Usage
  • Examples
  • API Reference

Deploy your Saturation UI app

Build beautiful, saturated interfaces with our component library.

Deploy to Vercel for the best performance and developer experience.