Checkbox

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

export default function CheckboxBasic() {
  return (
    <div className="flex flex-col gap-4">
      <Field>
        <Label>
          <Checkbox name="updates" defaultChecked />
          Email me product updates
        </Label>
      </Field>
      <Field>
        <Label>
          <Checkbox name="all" indeterminate />
          Select all (3 of 5 selected)
        </Label>
      </Field>
      <Field disabled>
        <Label>
          <Checkbox name="locked" />
          Locked by your admin
        </Label>
      </Field>
    </div>
  )
}

import { Checkbox } from '@/components/ui/checkbox'
import { Field, FieldLabel } from '@/components/ui/field'
import { Input } from '@/components/ui/input'
import { Label } from '@/components/ui/label'

export default function LabelBasic() {
  return (
    <div className="flex max-w-sm flex-col gap-6">
      {/* Text inputs: FieldLabel inside a Field is wired to the input. */}
      <Field>
        <FieldLabel>Display name</FieldLabel>
        <Input name="displayName" autoComplete="nickname" />
      </Field>
      {/* Choice controls: wrap them in a Label. */}
      <Label>
        <Checkbox name="remember" />
        Remember this device
      </Label>
    </div>
  )
}