Skip to main content
Switch provides an alternative to checkboxes for binary on/off states. Use switches for settings that take effect immediately.

​
Basic Usage

import { Switch } from "@soft-ui/react/switch"

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

​
Label Position

Control label placement with the position prop: 
import { Switch } from "@soft-ui/react/switch"

function Example() {
  return (
    <>
      <Switch label="Label on right" position="right" />
      <Switch label="Label on left" position="left" />
    </>
  )
}

​
Controlled State

import { useState } from "react"
import { Switch } from "@soft-ui/react/switch"

function Example() {
  const [enabled, setEnabled] = useState(false)

  return (
    <Switch
      label="Auto-save"
      checked={enabled}
      onCheckedChange={setEnabled}
    />
  )
}

​
Switch Without Label

import { Switch } from "@soft-ui/react/switch"

function Example() {
  return <Switch aria-label="Toggle feature" />
}
Use Switch for settings that apply immediately. Use Checkbox when changes require confirmation (like in a form).

​
Disabled State

import { Switch } from "@soft-ui/react/switch"

function Example() {
  return (
    <Switch
      label="Disabled switch"
      disabled
    />
  )
}

​
API Reference

For complete prop documentation, see the Switch API reference.

Build docs developers (and LLMs) love

Get started for freeTalk to us