Switch

Web + MobileBetaForms

Web and mobile — the same component for React and React Native. Beta: its API may still change in a minor version.

Why it is here. Used by Orochia, Orazaka, krizaka.com.

When to use

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

When not to use

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

Installation

Install

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

Styles

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

Import

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

Examples

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	Default	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.

Accessibility

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.

Keyboard

Keys	Action
`Space`	Toggles the switch.

Best practices

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.

Generated from the code of @krizaka/ui 3.8.0: its meta.ts, its examples and its types.Edit this documentation on GitHub