Field

Compose labels, controls, descriptions, and errors into a form field.

Preview

Account

Type into the inputs. Required fields show an error below.

Name

Shown on your public profile.

Username

This username is taken.

Accept terms and conditions

Or choose a plan

Starter

For personal projects.

Pro

For teams that ship weekly.

Installation

$ pnpm dlx shadcn@latest add https://stylexcn.vercel.app/r/field.json

$ pnpm dlx shadcn@latest add @stylexcn/field

Usage

<FieldSet>
  <FieldLegend>Profile</FieldLegend>
  <FieldGroup>
    <Field>
      <FieldLabel htmlFor="email">Email</FieldLabel>
      <Input id="email" placeholder="you@example.com" />
      <FieldDescription>We will not share your email.</FieldDescription>
    </Field>
  </FieldGroup>
</FieldSet>