Skip to main contentSkip to docs navigation
View on GitHub

Switch

Toggle switch styled consistently across browsers and devices, built on custom checkbox markup with size and context color variants.

On this page

Overview

A switch has the markup of a custom checkbox but renders as a toggle switch via <Switch>. It supports the native disabled attribute, same as any checkbox input.

JSX
import { Switch } from '@chassis-ui/react'

export const Example = () => {
  return (
    <>
      <Switch label="Default switch checkbox input" id="formSwitchCheckDefault" />
      <Switch label="Checked switch checkbox input" id="formSwitchCheckChecked" defaultSelected />
      <Switch label="Disabled switch checkbox input" id="formSwitchCheckDisabled" disabled />
      <Switch
        label="Disabled checked switch checkbox input"
        id="formSwitchCheckCheckedDisabled"
        defaultSelected
        disabled
      />
    </>
  )
}

Sizes

Set size to "sm" or "lg" to change a switch's dimensions; the default renders at md size.

JSX
import { Switch } from '@chassis-ui/react'

export const Example = () => {
  return (
    <>
      <Switch size="sm" label="Small switch checkbox input" id="formSwitchCheckDefaultSm" />
      <Switch label="Default switch checkbox input" id="formSwitchCheckDefaultMd" />
      <Switch size="lg" label="Large switch checkbox input" id="formSwitchCheckDefaultLg" />
    </>
  )
}

Context colors

Set color to any of the Chassis context colors to tint the switch indicator when selected.

JSX
import { Switch } from '@chassis-ui/react'

export const Example = () => {
  return <Switch color="danger" id="switchDanger" label="Danger switch" defaultSelected />
}

API

Switch

PropTypeDefault
className?string—
A string of all className you want applied to the component.
color?ContextColor—
Sets the color of the switch indicator to one of Chassis context colors.
defaultSelected?boolean—
Whether the switch is selected, uncontrolled.
id?string—
The id global attribute defines an identifier (ID) that must be unique in the whole document.
invalid?boolean—
Set component validation state to invalid. Left unset, the component shows as invalid by itself from a submit it held back (an empty required one, say) until it no longer would, or its form is reset. Set it, to false too, and it alone decides.
isSelected?boolean—
Whether the switch is selected, controlled.
label?ReactNode—
The element represents a caption for a component. Children are accepted as an alias for this prop — label wins when both are given. react-aria, which backs this component, calls the same thing children; this package renames it to label, and honouring both means the shape React developers reach for first still names the control instead of silently producing an unlabelled one.
onChange?((isSelected: boolean) => void)—
Callback fired when the selected state changes.
size?"sm" | "lg"—
Size the component sm or lg.
type?"checkbox" | "radio"checkbox
Specifies the type of component.
valid?boolean—
Set component validation state to valid.