Switch

Web + MobileBêtaFormulaires

Web et mobile — le même composant pour React et React Native. Bêta : son API peut encore changer à une version mineure.

Pourquoi il est là. Used by Orochia, Orazaka, krizaka.com.

Quand l’utiliser

For a setting that takes effect immediately: autoplay, notifications, a weekly digest.

Quand ne pas l’utiliser

For a choice submitted with a form, or an agreement.À la place : Checkbox
For more than two states.À la place : Radio group
To run an action.À la place : Button

Installation

Installer

npm install @krizaka/ui @krizaka/tailwind @krizaka/tokens tailwindcss

Styles

@import "tailwindcss";
@import "@krizaka/tailwind";
@import "@krizaka/ui/tailwind.css";

Importer

import { Switch } from "@krizaka/ui/switch";

Exemples

Off

Named by label.

On

defaultChecked (or checked + onCheckedChange).

Disabled

Off and on.

Small

size="sm".

With a visible label

A label and a hint on the same line.

Weekly digest

One email on Monday with what you missed.

Props

An on/off switch: checked/defaultChecked + onCheckedChange.

Prop	Type	Défaut	Description
`invalid`	`boolean`	—	Marks it invalid: aria-invalid and data-invalid.
`label`	`string`	—	The accessible name — required when no visible label names it, passed translated.
`size`	`"sm" \| "md"`	`md`	sm · md.

Accessibilité

Radix Switch: role="switch" with aria-checked.
label names it when no visible label does; otherwise use Field.Label htmlFor and aria-describedby for the hint.

Clavier

Touches	Action
`Space`	Toggles the switch.

Bonnes pratiques

Name the setting, not the state: “Autoplay”, not “Turn autoplay on”.
Put the label first and the switch at the end of the line (Field.Label htmlFor), with a hint when it helps.

Générée depuis le code de @krizaka/ui 3.10.0 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub