Component

Field

Composable form layout primitives — label, description, error and grouping for any input control.

Fieldorientation: vertical · horizontal · responsive · size: xl (default) · default

FieldSet / FieldLegendgroups related fields

FieldLabel / FieldDescriptionlabel + supporting text

FieldErrorvalidation message(s)

FieldSeparatordivider — optional label

Playground

We'll never share your email.

Orientation— orientation

Size— size

Invalid— invalid

Show description— showDescription

Basic — vertical

Username

This is your public display name.

Size — default (compact, opt-in)

Marketing emails

Invalid — with error message

Password

Password must be at least 8 characters.

Orientation — horizontal

Marketing emails

Push notifications

Orientation — responsive (stacks on narrow, inline on wide)

First name

Last name

FieldSet, FieldLegend & FieldGroup

Shipping address

Where should we send your order?

Street address

City

ZIP code

Choice cards — radio wrapped in FieldLabel

Free

For individuals just getting started.

Pro

Unlimited projects and priority support.

Team

Shared workspaces for your whole org.

FieldSeparator — divider with label

Or continue with

Textarea field

Bio

Max 200 characters.

Select field

Department

Choose the team this request is for.

Slider field

Price range$50

Set your maximum budget per item.

Switch field — horizontal

Multi-factor authentication

Require a verification code at sign-in.

RTL support

البريد الإلكتروني

لن نشارك بريدك الإلكتروني أبدًا.

Tokens used

8 semantic tokens consumed by this component.

--foregroundForeground

text-foreground

--muted-foregroundMuted Foreground

text-muted-foreground

--destructiveDestructive

bg-destructivetext-destructiveborder-destructivering-destructive

--primaryPrimary

bg-primarytext-primaryborder-primaryring-primary

--backgroundBackground

bg-background

--borderBorder

border-borderborder

--inputInput

bg-inputborder-input

--ringRing

ring-ringring