Skip to main content
ninna-ui
On this page

Switch

Switch component for toggling between two states with support for labels, descriptions, and multiple sizes.

import { Switch } from "@ninna-ui/forms";

pnpm add @ninna-ui/forms@latest
Includes @ninna-ui/core. CSS setup required.View source

Usage

Import and use the Switch component in your application.

import { Switch } from "@ninna-ui/forms";


export default function Example() {
  return (
    <Switch label="Enable notifications" />
  );
}

Basic

Basic switch with label.

Live preview

Variants

Switch supports solid and outline variants.

Live preview

Sizes

Switch comes in 3 sizes: sm, md, and lg.

Live preview

Colors

Switch supports multiple color themes.

Live preview

Track Labels

Switch with on/off labels inside the track.

Live preview

Thumb Icon

Switch with custom icon inside the thumb.

Live preview

With Description

Switch with label and description text.

Live preview
Receive email updates about your account activity
Get notified about new features and promotions

Loading

Switch with loading state.

Live preview

States

Switch in different states.

Live preview

React Hook Form

Switch works with React Hook Form using the Controller pattern.

Live preview

API Reference

Complete list of props for the Switch component.

Switch Props

PropTypeDefaultDescription
size'sm' | 'md' | 'lg''md'Size of the switch
color'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'danger''primary'Color theme of the switch
variant'solid' | 'soft' | 'outline''solid'Visual variant of the switch
checkedboolean—Controlled checked state
defaultCheckedboolean—Default checked state for uncontrolled usage
onCheckedChange(checked: boolean) => void—Callback when checked state changes
labelReactNode—Label text for the switch
descriptionReactNode—Description text below the label
labelPosition'start' | 'end''end'Position of the label relative to switch
invalidbooleanfalseWhether the switch is in an invalid state
loadingbooleanfalseWhether the switch is in a loading state
trackLabels{ on?: string; off?: string }—Track labels for on/off states
thumbIconReactNode—Custom icon for the thumb
disabledbooleanfalseWhether the switch is disabled

Accessibility

  • Built on Radix UI Switch for full accessibility
  • Proper focus states with visible outlines
  • Supports keyboard navigation (Space to toggle)
  • Labels are properly associated with switches via htmlFor
  • Uses role="switch" with aria-checked state announced to screen readers