مفتاح تبديل

import { Switch } from 'topclassui/switch'

/** Outside a Field: a native label points at the id of the switch, 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">
        <Switch id="switch-basic-digest" defaultChecked />
        <label htmlFor="switch-basic-digest" className="text-sm text-body">Weekly digest</label>
      </div>
      <div className="flex items-center gap-2">
        <Switch id="switch-basic-mentions" />
        <label htmlFor="switch-basic-mentions" className="text-sm text-body">Email me when I am mentioned</label>
      </div>
    </div>
  )
}

import { Button } from 'topclassui/button'
import { Switch } from 'topclassui/switch'

/** One switch that is on, in a plain form: it sends digest=on, 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">
        <Switch id="switch-form-digest" name="digest" defaultChecked />
        <label htmlFor="switch-form-digest" className="text-sm text-body">Weekly digest</label>
      </div>
      <Button type="submit">Save</Button>
    </form>
  )
}

import { Switch } from 'topclassui/switch'

/** A switch that is off still sends a value: Base UI adds an input of type hidden beside it. */
export default function Demo() {
  return (
    <form className="grid justify-items-start gap-3">
      <div className="flex items-center gap-2">
        <Switch id="switch-unchecked-news" name="news" value="yes" uncheckedValue="no" />
        <label htmlFor="switch-unchecked-news" className="text-sm text-body">Product news</label>
      </div>
    </form>
  )
}

import { Switch } from 'topclassui/switch'

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

import { TopClassProvider } from 'topclassui/provider'
import { Switch } from 'topclassui/switch'

/** Arabic, inside TopClassProvider as the root layout would mount it. The thumb starts at the right and
 * slides to the left when the switch is on. */
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">
          <Switch id="switch-rtl-digest" name="digest" defaultChecked />
          <label htmlFor="switch-rtl-digest" className="text-sm text-body">الملخص الأسبوعي</label>
        </div>
        <div className="flex items-center gap-2">
          <Switch id="switch-rtl-mentions" name="mentions" />
          <label htmlFor="switch-rtl-mentions" className="text-sm text-body">راسلني عند الإشارة إليّ</label>
        </div>
      </div>
    </TopClassProvider>
  )
}