Yami UI

Compose accessible form fields and grouped inputs.

Installation

Add the field component with the shadcn CLI.

npx shadcn@latest add https://yami.ui.unsanity.ai/r/field.json

Usage

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

<Field className="w-72">
  <FieldLabel htmlFor="username">Username</FieldLabel>
  <Input id="username" placeholder="yami" />
  <FieldDescription>This is your public display name.</FieldDescription>
</Field>

Examples

Field

Label + control + description

Code

import {
  Field,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

<Field className="w-72">
  <FieldLabel htmlFor="field-email">Email</FieldLabel>
  <Input id="field-email" type="email" placeholder="you@example.com" />
  <FieldDescription>We will never share your email.</FieldDescription>
</Field>

Field Group

Stack related fields

Code

import { Field, FieldGroup, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

<FieldGroup className="w-72">
  <Field>
    <FieldLabel htmlFor="fg-first">First name</FieldLabel>
    <Input id="fg-first" placeholder="Jane" />
  </Field>
  <Field>
    <FieldLabel htmlFor="fg-last">Last name</FieldLabel>
    <Input id="fg-last" placeholder="Cooper" />
  </Field>
</FieldGroup>

Field Set + Legend

Grouped fieldset

Billing address

Code

import {
  Field,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"
import { Input } from "@/components/ui/input"

<FieldSet className="w-72">
  <FieldLegend>Billing address</FieldLegend>
  <FieldGroup>
    <Field>
      <FieldLabel htmlFor="fs-street">Street</FieldLabel>
      <Input id="fs-street" placeholder="123 Helvetica St" />
    </Field>
    <Field>
      <FieldLabel htmlFor="fs-city">City</FieldLabel>
      <Input id="fs-city" placeholder="Zurich" />
    </Field>
  </FieldGroup>
</FieldSet>

Horizontal Field

Control beside content

Marketing emails

Receive product updates.

Code

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldTitle,
} from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"

<Field orientation="horizontal" className="w-72 items-center justify-between">
  <FieldContent>
    <FieldTitle>Marketing emails</FieldTitle>
    <FieldDescription>Receive product updates.</FieldDescription>
  </FieldContent>
  <Switch defaultChecked />
</Field>

Field Error

Invalid state

Code

import { Field, FieldError, FieldLabel } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

<Field data-invalid className="w-72">
  <FieldLabel htmlFor="field-pw">Password</FieldLabel>
  <Input id="field-pw" type="password" aria-invalid defaultValue="123" />
  <FieldError>Password must be at least 8 characters.</FieldError>
</Field>

Field Separator

Divide field groups

Code

import { Field, FieldGroup, FieldLabel, FieldSeparator } from "@/components/ui/field"
import { Input } from "@/components/ui/input"

<FieldGroup className="w-72">
  <Field>
    <FieldLabel htmlFor="fsep-user">Username</FieldLabel>
    <Input id="fsep-user" placeholder="yami" />
  </Field>
  <FieldSeparator>or</FieldSeparator>
  <Field>
    <FieldLabel htmlFor="fsep-email">Email</FieldLabel>
    <Input id="fsep-email" type="email" placeholder="you@example.com" />
  </Field>
</FieldGroup>