Forms & Inputs

Toggle

Toggle component is used to quickly switch between two possible states. These are only used for binary actions that occur immediately after the user turns the switch on/off.

V 1.0View in Storybook

Controls

Switch (on/off)

State

Size

Label

Helper Text

Variants

Switch — OFF & ONSide-by-side comparison of the two switch values

Switch - OFF

Switch - ON

SizeSmall (39×24px) and Medium (52×32px)

size = Small

size = Medium

StateAll four states: Default, Pressed, Enabled, Disabled

state = Default

state = Pressed

state = Enabled

state = Disabled

State × Size matrixEvery combination of State and Size

State	Small	Medium
Default
Pressed
Enabled
Disabled

Props

Name

Type

Default

state

'default' | 'pressed' | 'enabled' | 'disabled'

'default'

checked

boolean

false

size

'sm' | 'md'

'sm'

onChange

(checked: boolean) => void

—

label

string

—

Code

import { Toggle } from '@/src/components/Toggle/Toggle'

const [on, setOn] = useState(false)

<Toggle
  size="md"
  state="default"
  checked={on}
  onChange={setOn}
/>