Form

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

Usage

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

Sign in

Field + Input + Button

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

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.

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

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.

Free

Pro

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>