Skip to main content
ninna-ui

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

Requires @ninna-ui/core (auto-installed) + CSS setup.

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.

Variants

Switch supports solid and outline variants.

Sizes

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

Colors

Switch supports multiple color themes.

Track Labels

Switch with on/off labels inside the track.

Thumb Icon

Switch with custom icon inside the thumb.

With Description

Switch with label and description text.

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

Loading

Switch with loading state.

States

Switch in different states.

React Hook Form

Switch works with React Hook Form using the Controller pattern.

API Reference

Complete list of props for the Switch component.

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' | '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