精选最新
开关Basic Switch
A labelled on/off switch built on a real checkbox with `role="switch"`, driven entirely by CSS.
#toggle#switch#checkbox
3 个框架初级
Loading…
A toolbar of `aria-pressed` buttons where several toggles can be active at once.
<!--
Independent on/off picks (bold AND italic AND underline) are aria-pressed
buttons in a role="group", NOT radios - several can be on at once, which is a
different announcement from a single-choice segmented control. State reads by
FILL: a pressed button is solid, an idle one is outlined, so it is obvious with
colour stripped.
-->
<div role="group" aria-label="Text formatting" class="inline-flex overflow-hidden rounded-lg border border-gray-300 dark:border-gray-700">
<button type="button" aria-pressed="true" aria-label="Bold" class="inline-flex h-10 w-10 items-center justify-center bg-blue-600 text-sm font-bold text-white transition-colors focus-visible:relative focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600">B</button>
<button type="button" aria-pressed="false" aria-label="Italic" class="inline-flex h-10 w-10 items-center justify-center border-l border-gray-300 bg-white text-sm italic text-gray-700 transition-colors hover:bg-gray-100 focus-visible:relative focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800">I</button>
<button type="button" aria-pressed="false" aria-label="Underline" class="inline-flex h-10 w-10 items-center justify-center border-l border-gray-300 bg-white text-sm text-gray-700 underline transition-colors hover:bg-gray-100 focus-visible:relative focus-visible:z-10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-200 dark:hover:bg-gray-800">U</button>
</div>| Prop | 类型 | 默认值 | 说明 |
|---|---|---|---|
label必填 | string | - | 加载时朗读的无障碍标签。 |
options必填 | { id: string; label: string; icon: ReactNode }[] | - | Options |
defaultPressed | string[] | [] | Default pressed |
onChange | (pressed: string[]) => void | - | On change |
Independent picks are pressed buttons in a `role="group"`, never radios - the state reads by FILL (solid vs outlined) so it holds up with colour stripped. Feed `options` of `{ id, label, icon }` and read the live set from `onChange`.