Switch

Forms

A pill toggle with a stretchy pill thumb and clear checked state.

Live preview

Notifications

Receive product updates.

Disabled

Installation

Import the component from the kit. The package ships source and is transpiled by Next.js.

Import

import { Switch } from "@nphuonha/ui-kit";

Compose the component with your own content. All controls share the same focus, disabled and invalid states.

Usage

<Switch label="Notifications" defaultChecked />

Props are additive to the underlying Base UI or native element.

Prop	Type	Default	Description
label	ReactNode	—	Visible label.
description	ReactNode	—	Helper text.
checked	boolean	—	Controlled checked state.
defaultChecked	boolean	—	Initial checked state.
disabled	boolean	—	Disables the switch.