Yami

Search documentation

Search components and pages

Form

Compose accessible forms from Field, Input, and control primitives. No component ships by default.

We will never share your email.

Usage

Yami UI does not ship a Form component. Compose forms directly from the Field, Input, Select, and Button primitives shown below.

import { Form } from "@/components/ui/form"

Sign in

Field + Input + Button

Code

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

<form className="flex w-full max-w-sm flex-col gap-6">
  <FieldGroup>
    <Field>
      <FieldLabel htmlFor="email">Email</FieldLabel>
      <Input id="email" type="email" placeholder="you@example.com" required />
    </Field>
    <Field>
      <FieldLabel htmlFor="password">Password</FieldLabel>
      <Input id="password" type="password" required />
    </Field>
  </FieldGroup>
  <Button type="submit">Sign in</Button>
</form>

Select field

Field wrapping a Select

Choose your primary role.

Code

import { Field, FieldDescription, FieldLabel } from "@/components/ui/field"
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select"

<Field className="w-full max-w-sm">
  <FieldLabel htmlFor="role">Role</FieldLabel>
  <Select defaultValue="engineer">
    <SelectTrigger id="role">
      <SelectValue />
    </SelectTrigger>
    <SelectContent>
      <SelectItem value="engineer">Engineer</SelectItem>
      <SelectItem value="designer">Designer</SelectItem>
    </SelectContent>
  </Select>
  <FieldDescription>Choose your primary role.</FieldDescription>
</Field>

Switch field

Horizontal Field
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-full max-w-sm items-center justify-between">
  <FieldContent>
    <FieldTitle>Marketing emails</FieldTitle>
    <FieldDescription>Receive product updates.</FieldDescription>
  </FieldContent>
  <Switch defaultChecked />
</Field>

Validation

data-invalid + FieldError

Code

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

<Field data-invalid className="w-full max-w-sm">
  <FieldLabel htmlFor="username">Username</FieldLabel>
  <Input id="username" aria-invalid defaultValue="a" />
  <FieldError>Username must be at least 3 characters.</FieldError>
</Field>

Fieldset

FieldSet + FieldLegend + RadioGroup
Plan

Pick a subscription tier.

Code

import {
  Field,
  FieldDescription,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from "@/components/ui/field"
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group"

<FieldSet className="w-full max-w-sm">
  <FieldLegend variant="label">Plan</FieldLegend>
  <FieldDescription>Pick a subscription tier.</FieldDescription>
  <RadioGroup defaultValue="pro">
    <Field orientation="horizontal">
      <RadioGroupItem value="free" id="plan-free" />
      <FieldLabel htmlFor="plan-free" className="font-normal normal-case">Free</FieldLabel>
    </Field>
    <Field orientation="horizontal">
      <RadioGroupItem value="pro" id="plan-pro" />
      <FieldLabel htmlFor="plan-pro" className="font-normal normal-case">Pro</FieldLabel>
    </Field>
  </RadioGroup>
</FieldSet>