Basic Switch
A labelled on/off switch built on a real checkbox with `role="switch"`, driven entirely by CSS.
3 फ्रेमवर्कशुरुआती
A show/hide disclosure on native `<details>`/`<summary>` with a chevron that rotates on open.
<!--
A show/hide toggle is a native <details>/<summary>: it carries expanded state,
keyboard support and the open/closed announcement with zero JS, and it works
before hydration. The chevron ROTATES on open (group-open:rotate-180), so the
state reads from geometry, not a colour swap. The default triangle marker is
removed so only the chevron speaks.
-->
<details class="group w-full max-w-md rounded-xl border border-gray-200 dark:border-gray-800">
<summary class="flex cursor-pointer list-none items-center justify-between gap-3 px-4 py-3 text-sm font-medium text-gray-900 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 [&::-webkit-details-marker]:hidden dark:text-gray-100 dark:focus-visible:outline-blue-400">
Shipping & returns
<svg aria-hidden="true" viewBox="0 0 20 20" fill="none" stroke="currentColor" stroke-width="2" class="h-4 w-4 shrink-0 text-gray-500 transition-transform group-open:rotate-180 motion-reduce:transition-none"><path d="M5 8l5 5 5-5" stroke-linecap="round" stroke-linejoin="round" /></svg>
</summary>
<div class="border-t border-gray-200 px-4 py-3 text-sm text-gray-600 dark:border-gray-800 dark:text-gray-400">
Free returns within 30 days. Orders ship in 1-2 business days.
</div>
</details>| Prop | टाइप | डिफ़ॉल्ट | विवरण |
|---|---|---|---|
summaryआवश्यक | string | - | Summary |
childrenआवश्यक | ReactNode | - | कंपोनेंट के अंदर रेंडर होने वाला कंटेंट। |
defaultOpen | boolean | false | Default open |
className | string | - | रूट एलिमेंट पर मर्ज होने वाली अतिरिक्त क्लासेज़। |
The native element carries expanded state, keyboard support and the open/closed announcement with zero JS, and it works before hydration. The chevron rotates via `group-open:rotate-180`, so the state reads from geometry rather than a colour swap.