Label

import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'
...

import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'

export default function LabelDemoExample() {
  return <div class="flex items-center gap-2"><Checkbox id="label-terms" /><Label for="label-terms">Accept terms and conditions</Label></div>
}

import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
...

import { Button } from '@/components/ui/button'
import { Checkbox } from '@/components/ui/checkbox'
import { Field, FieldDescription, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet } from '@/components/ui/field'
import { Input } from '@/components/ui/input'
import { Select, SelectContent, SelectGroup, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { Textarea } from '@/components/ui/textarea'

const months = ['01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', '12']
const years = ['2024', '2025', '2026', '2027', '2028', '2029']

export default function FieldDemoExample() {
  return (
    <form class="w-full max-w-md"><FieldGroup><FieldSet><FieldLegend>Payment Method</FieldLegend><FieldDescription>All transactions are secure and encrypted</FieldDescription><FieldGroup><Field><FieldLabel for="card-name">Name on Card</FieldLabel><Input id="card-name" placeholder="Evil Rabbit" /></Field><Field><FieldLabel for="card-number">Card Number</FieldLabel><Input id="card-number" placeholder="1234 5678 9012 3456" /><FieldDescription>Enter your 16-digit card number</FieldDescription></Field><div class="grid grid-cols-3 gap-3"><Field><FieldLabel>Month</FieldLabel><Select><SelectTrigger aria-label="MM"><SelectValue placeholder="MM" /></SelectTrigger><SelectContent><SelectGroup>{months.map(month => <SelectItem value={month}>{month}</SelectItem>)}</SelectGroup></SelectContent></Select></Field><Field><FieldLabel>Year</FieldLabel><Select><SelectTrigger aria-label="YYYY"><SelectValue placeholder="YYYY" /></SelectTrigger><SelectContent><SelectGroup>{years.map(year => <SelectItem value={year}>{year}</SelectItem>)}</SelectGroup></SelectContent></Select></Field><Field><FieldLabel for="cvv">CVV</FieldLabel><Input id="cvv" placeholder="123" /></Field></div></FieldGroup></FieldSet><FieldSeparator /><FieldSet><FieldLegend>Billing Address</FieldLegend><FieldDescription>The billing address associated with your payment method</FieldDescription><Field orientation="horizontal"><Checkbox id="shipping-address" defaultChecked /><FieldLabel for="shipping-address">Same as shipping address</FieldLabel></Field></FieldSet><Field><FieldLabel for="comments">Comments</FieldLabel><Textarea id="comments" placeholder="Add any additional comments" /></Field><Field orientation="horizontal"><Button type="submit">Submit</Button><Button type="button" variant="outline">Cancel</Button></Field></FieldGroup></form>
  )
}

import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'
...

import { Checkbox } from '@/components/ui/checkbox'
import { Label } from '@/components/ui/label'

const translations = { ar: 'قبول الشروط والأحكام', he: 'קבל תנאים והגבלות', en: 'Accept terms and conditions' } as const

export default function LabelRtlExample() {
  let language = $state<keyof typeof translations>('ar')
  const direction = () => language === 'en' ? 'ltr' : 'rtl'
  return <div class="grid gap-4"><select value={language} onChange={event => { language = event.currentTarget.value as keyof typeof translations }}><option value="ar">Arabic (العربية)</option><option value="he">Hebrew (עברית)</option><option value="en">English</option></select><div class="flex items-center gap-2" dir={direction()}><Checkbox id="label-terms-rtl" /><Label for="label-terms-rtl">{translations[language]}</Label></div></div>
}