Switch

Use Switch for a setting that takes effect as soon as it changes. For an option that is applied when a form is submitted, use a checkbox instead.

import { useId, useState } from 'react'
import { Label, Switch } from '@librechat/client'

export default function SwitchDefault() {
  const id = useId()
  const [checked, setChecked] = useState(true)
  return (
    <div className="flex items-center gap-3">
      <Switch
        id={id}
        aria-labelledby={`${id}-label`}
        checked={checked}
        onCheckedChange={setChecked}
      />
      <Label id={`${id}-label`} htmlFor={id}>
        Auto-send dictation
      </Label>
    </div>
  )
}

Props

Prop	Type	Description
`checked`	`boolean`	The controlled state.
`onCheckedChange`	`(checked: boolean) => void`	Called when the user toggles the switch.
`defaultChecked`	`boolean`	The initial state when uncontrolled.
`disabled`	`boolean`	Blocks toggling.
`aria-label` or `aria-labelledby`	`string`	Required: exactly one names the switch.

Accessibility

The switch exposes the switch role with its checked state, and its type requires an accessible name.

Key	Action
`Space` or `Enter`	Toggles the switch

Switch

Props

Accessibility

On this page