Switch

The Switch component provides a toggle switch for on/off states.

Usage

import { Switch } from '@harnessio/ui/components'

//...

return (
  <Switch
    id="airplane-mode"
    checked={airplaneModeEnabled}
    onCheckedChange={setAirplaneModeEnabled}
    label="Toggle Airplane mode"
    description="Enable or disable airplane mode to control all wireless communication."
  />
)

API Reference

The Switch component can be used either controlled with the checked and onCheckedChange props, or uncontrolled. When used uncontrolled, the defaultChecked prop can be used to set the initial state of the switch.

<Switch
  id="airplane-mode"             // [OPTIONAL] ID of the switch
  checked                        // [OPTIONAL] whether the switch is checked
  defaultChecked                 // [OPTIONAL] initial checked state
  required                       // [OPTIONAL] whether the switch is required
  onCheckedChange={handleChange} // [OPTIONAL] callback called when the checked state changes
  disabled                       // [OPTIONAL] whether the switch is disabled
  label                          // [OPTIONAL] a label for the switch
  description                    // [OPTIONAL] a description for the switch
/>

Prop	Required	Default	Type
id	true		string
checked	false	false	boolean
defaultChecked	false	false	boolean
required	false	false	boolean
onCheckedChange	false		(checked: boolean) => void
disabled	false	false	boolean