saturation/ui
DocsComponentsBlocksPages

Sections

IntroductionComponentsInstallationTheming

Components

ComponentsAccordionAI Chat InputAlertAnimated GroupAnimated NumberAvatarBadgeBorder TrailBreadcrumbButtonButton GroupCalendar PickerCardChartCheckboxCollapsibleComboboxCommandContext MenuCredit CardData TableDate PickerDialogDropdown MenuEmptyFieldFiltersFull CalendarGlow EffectInputInput GroupInput OTPItemKanbanKbdMenubarNovel EditorPaginationProgressProgressive BlurRadio GroupSelectSeparatorSheetSkeletonSliderSonnerSpinnerSpotlightSwitchTableTabsText EffectText ShimmerTextareaToggleToggle GroupTreeTypography
Docs/Components/Field

Field

A form field wrapper with label, input, and error states.

Loading...

Installation

pnpm dlx shadcn@latest add @saturation/field

Usage

import { Field } from "@/components/ui/field"
<Field label="Email" error="Invalid email">
  <Input type="email" />
</Field>

Examples

With Textarea

Loading...
Field wrapping textarea.

With Select

Loading...
Field wrapping select.

With Slider

Loading...
Field wrapping slider.

With Checkbox

Loading...
Field wrapping checkbox.

With Radio Group

Loading...
Field wrapping radio group.

With Switch

Loading...
Field wrapping switch.

Field Group

Loading...
Grouped fields.

With Validation

Loading...
Field with error state.

API Reference

PropTypeDefaultDescription
labelstring—Field label text.
errorstring—Error message to display.
descriptionstring—Help text below the input.

On This Page

  • Installation
  • Usage
  • Examples
  • With Textarea
  • With Select
  • With Slider
  • With Checkbox
  • With Radio Group
  • With Switch
  • Field Group
  • With Validation
  • API Reference

We will never share your email.

Password must be at least 8 characters.

You agree to our Terms of Service and Privacy Policy.

This will be displayed on your public profile.

Choose the department you belong to.

Set your budget range: $200 – $800

Automatically sync your Desktop and Documents folders to the cloud.

Notification Method

How would you like to receive notifications?

Get notified via your email address.

Receive text messages on your phone.

Add an extra layer of security to your account by requiring a verification code on each login.

or
Please enter a valid email address.