Switch

The Switch component provides a toggle switch for on/off states.
It is built on top of the Radix UI Switch primitive with additional styling.

Usage

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

// Standard usage
<Switch
  id="airplane-mode"
  checked={airplaneModeEnabled}
  onCheckedChange={setAirplaneModeEnabled}
  label="Airplane mode"
  caption="Enable or disable airplane mode to control all wireless communication."
/>

// Optional field
<Switch
  id="notifications"
  checked={notificationsEnabled}
  onCheckedChange={setNotificationsEnabled}
  label="Enable notifications"
  caption="Toggle to enable or disable notifications."
  optional
/>

// Disabled
<Switch
  id="god-mode"
  checked={false}
  onCheckedChange={() => {}}
  label="God mode"
  caption="Toggle to enable or disable God mode, which grants unrestricted access and control."
  disabled
/>

// Without Label and Caption
<Switch id="no-label-caption" checked={true} onCheckedChange={() => {}} />
<Switch id="no-label-caption-disabled" checked={false} disabled />

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
  caption                        // [OPTIONAL] a caption for the switch
  optional                       // [OPTIONAL] indicates if the field is optional
/>

Prop	Required	Default	Type
id	false		string
checked	false	false	boolean
defaultChecked	false	false	boolean
required	false	false	boolean
onCheckedChange	false		(checked: boolean) => void
disabled	false	false	boolean
label	false		string
caption	false		string
optional	false	false	boolean
className	false		string