Recipes

Form Recipes

Copy these production-oriented patterns for auth, checkout, and settings workflows. Each recipe includes explicit labels and accessibility-safe defaults.

Auth

Email and password with semantic autofill support.

Checkout

Address form with explicit labels and country select.

Settings

Switch + textarea preferences with clear naming.

Auth Recipe

TSX

1import { Button, Input, Label } from "@glinui/ui"
2
3export function LoginForm() {
4  return (
5    <form className="space-y-4" aria-label="Login form">
6      <div className="space-y-1.5">
7        <Label htmlFor="email">Email</Label>
8        <Input id="email" type="email" autoComplete="email" placeholder="you@example.com" />
9      </div>
10      <div className="space-y-1.5">
11        <Label htmlFor="password">Password</Label>
12        <Input id="password" type="password" autoComplete="current-password" />
13      </div>
14      <Button type="submit" variant="glass" className="w-full">Sign in</Button>
15    </form>
16  )
17}

Checkout Recipe

TSX

1import { Button, Input, Label, Select } from "@glinui/ui"
2
3const countries = [
4  { value: "us", label: "United States" },
5  { value: "ca", label: "Canada" },
6  { value: "gb", label: "United Kingdom" }
7]
8
9export function CheckoutAddressForm() {
10  return (
11    <form className="grid gap-4" aria-label="Checkout address form">
12      <div className="space-y-1.5">
13        <Label htmlFor="full-name">Full name</Label>
14        <Input id="full-name" autoComplete="name" />
15      </div>
16      <div className="space-y-1.5">
17        <Label htmlFor="address-line-1">Address line 1</Label>
18        <Input id="address-line-1" autoComplete="address-line1" />
19      </div>
20      <div className="space-y-1.5">
21        <Label htmlFor="country">Country</Label>
22        <Select id="country" options={countries} placeholder="Select country" />
23      </div>
24      <Button type="submit" variant="glass">Continue to payment</Button>
25    </form>
26  )
27}

Settings Recipe

TSX

1import { Label, Switch, Textarea } from "@glinui/ui"
2
3export function NotificationSettingsForm() {
4  return (
5    <form className="space-y-5" aria-label="Notification settings">
6      <div className="flex items-center justify-between rounded-lg border border-border/60 p-4">
7        <div className="space-y-0.5">
8          <Label htmlFor="marketing-emails">Marketing emails</Label>
9          <p className="text-sm text-neutral-500">Product updates and release notes.</p>
10        </div>
11        <Switch id="marketing-emails" aria-label="Marketing emails" />
12      </div>
13      <div className="space-y-1.5">
14        <Label htmlFor="feedback">Feedback</Label>
15        <Textarea id="feedback" rows={4} placeholder="Tell us what to improve" />
16      </div>
17    </form>
18  )
19}