Switcher

free

Switcher toggles a single setting on or off directly in place.

Email notifications

Send a summary whenever a report finishes.

import { useState } from 'react';
import Switcher from '@/components/ui/switcher';

export default function UsageDemo() {

Installation

Add this component with the NateUI CLI.

npx nateui@latest add Switcher

pnpm dlx nateui@latest add Switcher

yarn dlx nateui@latest add Switcher

Examples

Basic

import Switcher from '@/components/ui/switcher';

export default function BasicDemo() {
  return (

Content

import Switcher from '@/components/ui/switcher';
import { PiMoon, PiSun } from 'react-icons/pi'

export default function ContentDemo() {

Custom Color

Service is live

Maintenance mode

Delete after export

import Switcher from '@/components/ui/switcher';

export default function CustomColorDemo() {
  return (

Loading

import { useState } from 'react';
import Switcher from '@/components/ui/switcher';

export default function LoadingDemo() {

Disabled

import Switcher from '@/components/ui/switcher';

export default function DisabledDemo() {
  return (

Controlled

State: off

import { useState } from 'react';
import Switcher from '@/components/ui/switcher';

export default function ControlledDemo() {

API

Switcher renders a labelled checkbox styled as an on/off toggle. Use it uncontrolled with defaultChecked, or controlled with checked plus onChange. It also accepts native input props.

Prop	Description	Type	Default
`checked`	Controlled on/off state.	`boolean`	-
`defaultChecked`	Initial state for uncontrolled usage.	`boolean`	-
`checkedContent`	Content shown inside the track when on.	`string \| ReactNode`	-
`unCheckedContent`	Content shown inside the track when off.	`string \| ReactNode`	-
`toggledClass`	Class applied to the track while on, used to override the on color.	`string`	`'bg-primary'`
`isLoading`	Replace the thumb with a spinner and block toggling.	`boolean`	`false`
`disabled`	Prevent interaction and apply disabled styling.	`boolean`	`false`
`readOnly`	Prevent the state from changing on interaction.	`boolean`	`false`
`name`	Name passed to the underlying input.	`string`	-
`onChange`	Called with the next state and the input change event.	`SwitcherChangeHandler`	-
`labelRef`	Ref forwarded to the root label element.	`Ref<HTMLLabelElement>`	-
`ref`	Ref forwarded to the underlying checkbox input.	`Ref<HTMLInputElement>`	-
`...nativeInputProps`	Native props for the underlying checkbox input.	`NativeSwitcherInputProps`	-

Types

type SwitcherChangeHandler = (
  checked: boolean,
  event: ChangeEvent<HTMLInputElement>,
) => void;
type NativeSwitcherInputProps = Omit<
  ComponentPropsWithRef<'input'>,
  'onChange'
>;