Form Recipes

import { Button, Input, Label } from "@glinui/ui"


export function LoginForm() {
  return (
    <form className="space-y-4" aria-label="Login form">
      <div className="space-y-1.5">
        <Label htmlFor="email">Email</Label>
        <Input id="email" type="email" autoComplete="email" placeholder="you@example.com" />
      </div>
      <div className="space-y-1.5">
        <Label htmlFor="password">Password</Label>
        <Input id="password" type="password" autoComplete="current-password" />
      </div>
      <Button type="submit" variant="glass" className="w-full">Sign in</Button>
    </form>
  )
}

import { Button, Input, Label, Select } from "@glinui/ui"


const countries = [
  { value: "us", label: "United States" },
  { value: "ca", label: "Canada" },
  { value: "gb", label: "United Kingdom" }
]


export function CheckoutAddressForm() {
  return (
    <form className="grid gap-4" aria-label="Checkout address form">
      <div className="space-y-1.5">
        <Label htmlFor="full-name">Full name</Label>
        <Input id="full-name" autoComplete="name" />
      </div>
      <div className="space-y-1.5">
        <Label htmlFor="address-line-1">Address line 1</Label>
        <Input id="address-line-1" autoComplete="address-line1" />
      </div>
      <div className="space-y-1.5">
        <Label htmlFor="country">Country</Label>
        <Select id="country" options={countries} placeholder="Select country" />
      </div>
      <Button type="submit" variant="glass">Continue to payment</Button>
    </form>
  )
}

import { Label, Switch, Textarea } from "@glinui/ui"


export function NotificationSettingsForm() {
  return (
    <form className="space-y-5" aria-label="Notification settings">
      <div className="flex items-center justify-between rounded-lg border border-line-soft p-4">
        <div className="space-y-0.5">
          <Label htmlFor="marketing-emails">Marketing emails</Label>
          <p className="text-sm text-muted">Product updates and release notes.</p>
        </div>
        <Switch id="marketing-emails" aria-label="Marketing emails" />
      </div>
      <div className="space-y-1.5">
        <Label htmlFor="feedback">Feedback</Label>
        <Textarea id="feedback" rows={4} placeholder="Tell us what to improve" />
      </div>
    </form>
  )
}