Browse documentation

Component

Switch

Use this for immediate on or off preferences. It accepts native checked, defaultChecked, and onChange props.

Preview

Installation

Packages are unreleased. Follow the packed artifact setup for package mode, or run the local CLI in copy mode and complete the reported npm, token CSS, and Tailwind setup.

Copy Switch · bash
pnpm exec ui add switch
Full installation guide

Usage

This example uses package mode. In copy mode, import the generated component from your project and complete the manual setup steps in the installation guide.

Switch example · tsx
import { Switch } from '@nimjs/ui';

export function Example() {
  return (
    <label><Switch defaultChecked /> Notifications</label>
  );
}

System metadata

API and states

Use this for immediate on or off preferences. It accepts native checked, defaultChecked, and onChange props.

Accessibility

A native checkbox exposes the switch role and responds to Space. Give every switch a visible label.