WebBêtaFormulaires

Web uniquement — React, depuis @krizaka/ui/switch. Bêta : son API peut encore changer à une version mineure.

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@beta @krizaka/tailwind@beta @krizaka/tokens@beta tailwindcss

Styles

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

Importer

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

Exemples

Off

Named by label.

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

export default function SwitchOff() {
  return <Switch label="Autoplay" />;
}

On

defaultChecked (or checked + onCheckedChange).

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

export default function SwitchOn() {
  return <Switch label="Autoplay" defaultChecked />;
}

Disabled

Off and on.

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

export default function SwitchDisabled() {
  return (
    <div className="flex gap-4">
      <Switch label="Autoplay" disabled />
      <Switch label="Loop" disabled defaultChecked />
    </div>
  );
}

Small

size="sm".

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

export default function SwitchSmall() {
  return <Switch label="Autoplay" size="sm" defaultChecked />;
}

With a visible label

A label and a hint on the same line.

Weekly digest

One email on Monday with what you missed.

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

// Named by a visible label (`Field.Label htmlFor`), with a hint.
export default function SwitchWithLabel() {
  return (
    <Field.Root className="w-80">
      <div className="flex items-center justify-between gap-4">
        <Field.Label htmlFor="digest" className="text-sm text-fg">
          Weekly digest
        </Field.Label>
        <Switch id="digest" defaultChecked aria-describedby="digest-hint" />
      </div>
      <Field.Hint id="digest-hint">One email on Monday with what you missed.</Field.Hint>
    </Field.Root>
  );
}

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 2.0.0-beta.6 : son meta.ts, ses exemples et ses types.Modifier cette documentation sur GitHub

Switch