مربع اختيار

import { Checkbox } from 'topclassui/checkbox'

/** Outside a Field: a native label points at the id of the checkbox, which is the button itself. */
export default function Demo() {
  return (
    <div className="grid justify-items-start gap-3">
      <div className="flex items-center gap-2">
        <Checkbox id="checkbox-basic-terms" defaultChecked />
        <label htmlFor="checkbox-basic-terms" className="text-sm text-body">I accept the terms</label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="checkbox-basic-news" />
        <label htmlFor="checkbox-basic-news" className="text-sm text-body">Send me product news</label>
      </div>
    </div>
  )
}

import { Checkbox } from 'topclassui/checkbox'

/** The two native ways to name a box: a label that points at its id, and a label that wraps it. A click on either presses it. */
export default function Demo() {
  return (
    <div className="grid justify-items-start gap-3">
      <div className="flex items-center gap-2">
        <Checkbox id="checkbox-labelled-for" />
        <label htmlFor="checkbox-labelled-for" className="text-sm text-body">Named by a label that points at it</label>
      </div>
      <label className="flex items-center gap-2 text-sm text-body">
        <Checkbox id="checkbox-labelled-wrap" />
        Named by a label that wraps it
      </label>
    </div>
  )
}

import { Button } from 'topclassui/button'
import { Checkbox } from 'topclassui/checkbox'

/** A checked box and an unchecked one with uncheckedValue, in a plain form: terms=on and news=no, before any script runs and after. */
export default function Demo() {
  return (
    <form className="grid justify-items-start gap-3">
      <div className="flex items-center gap-2">
        <Checkbox id="checkbox-form-terms" name="terms" defaultChecked />
        <label htmlFor="checkbox-form-terms" className="text-sm text-body">I accept the terms</label>
      </div>
      <div className="flex items-center gap-2">
        <Checkbox id="checkbox-form-news" name="news" value="yes" uncheckedValue="no" />
        <label htmlFor="checkbox-form-news" className="text-sm text-body">Send me product news</label>
      </div>
      <Button type="submit">Save</Button>
    </form>
  )
}

import { Checkbox } from 'topclassui/checkbox'

/** The five sizes, checked. Each target stays 24 px, and 44 px under a finger, whatever the box. */
export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-4">
      <Checkbox size="xs" defaultChecked aria-label="Extra small" />
      <Checkbox size="sm" defaultChecked aria-label="Small" />
      <Checkbox size="md" defaultChecked aria-label="Medium" />
      <Checkbox size="lg" defaultChecked aria-label="Large" />
      <Checkbox size="xl" defaultChecked aria-label="Extra large" />
    </div>
  )
}

import { TopClassProvider } from 'topclassui/provider'
import { Checkbox } from 'topclassui/checkbox'

/** Arabic, inside TopClassProvider as the root layout would mount it. The box sits at the right, before its label. */
export default function Demo() {
  return (
    <TopClassProvider direction="rtl" locale="ar">
      <div dir="rtl" lang="ar" className="grid justify-items-start gap-3">
        <div className="flex items-center gap-2">
          <Checkbox id="checkbox-rtl-terms" name="terms" defaultChecked />
          <label htmlFor="checkbox-rtl-terms" className="text-sm text-body">أوافق على الشروط</label>
        </div>
        <div className="flex items-center gap-2">
          <Checkbox id="checkbox-rtl-news" name="news" />
          <label htmlFor="checkbox-rtl-news" className="text-sm text-body">أرسل لي أخبار المنتج</label>
        </div>
      </div>
    </TopClassProvider>
  )
}