Switch

An on/off control for settings that apply immediately — not a checkbox waiting on a submit.

Source: 1 file
Dependencies: none
Playground: yes

Examples

Every variant of the shipped component, live. Switch the layout to read them as a table or one at a time, and open Code for the file behind them.

01Basic

<Switch defaultChecked />

02Size

<Switch size="sm | md | lg" />

03Variant

<Switch variant="primary | success | …" />

04Appearance

<Switch appearance="solid | soft | outline" />

05Radius

<Switch radius="none | sm | md | lg | full" />

06With icons

<Switch showIcons />

07Icon in thumb

<Switch showIcons iconPlacement="thumb" />

08Track & thumb width

<Switch trackWidth={48} thumbWidth={22} />

09With label

Email notifications on

<Label><Switch /> …</Label>

10Disabled

<Switch disabled />

Installation

One package for the whole library — run this once and every component on this site is importable. Adding the tokens to your stylesheet is the other half; the installation guide covers it.

npm install kipui

import { Switch } from "kipui";

Peer dependencies

react 19

react-dom 19

tailwindcss 4

Bundled dependencies

None beyond the peers above.

Usage

switch-example.tsx

import { Switch } from "kipui";

<Switch
  defaultChecked
  size="md"
  onCheckedChange={(checked) => save(checked)}
/>

Use a switch when the change takes effect at once; use a checkbox when it takes effect on submit.
`showIcons` plus `iconPlacement` decides whether the check/cross sits on the track or rides in the thumb.

Playground

Change the props and the snippet underneath updates with them.

Preview

Props

sizesm

variantprimary

appearancesolid

radiusfull

showIcons

disabled

<Switch
  size="sm"
  variant="primary"
  appearance="solid"
  radius="full"
/>

API reference

Transcribed from the component's own types. Props with no default are required.

Prop	Default	Description
checkedboolean	required	Controlled state.
defaultCheckedboolean	false	Uncontrolled seed.
onCheckedChange(checked: boolean) => void	required	Fires with the next state.
variant"primary" \| "success" \| "warning" \| "destructive" \| "secondary"	"primary"	Colour of the on state.
size"sm" \| "md" \| "lg"	"sm"	Track and thumb size.
appearance"solid" \| "soft" \| "outline"	"solid"	Surface treatment of the track.
radius"none" \| "sm" \| "md" \| "lg" \| "full"	"full"	Corner radius of the track.
showIconsboolean	false	Draws a check and cross for the two states.
namestring	required	Submits with the surrounding form under this name.
disabledboolean	false	Blocks interaction and dims the track.
valuestring \| number	"on"	Value posted while checked, matching a checkbox.
iconPlacement"track" \| "thumb"	"track"	Where `showIcons` puts the check and cross.
trackWidthstring \| number	required	Overrides the track width for the chosen `size`.
thumbWidthstring \| number	required	Overrides the thumb width for the chosen `size`.