Components
Switch

Switch

The Switch is an interactive, binary component designed for your applications. It offers a clear, visual interface for users to enable or disable specific settings, features, or functionalities.

UsageTypes

API reference docs for the component. Learn about the props, CSS, and other APIs of this exported module.

SwitchProps

checked

boolean

Whether the switch is checked.

defaultChecked

boolean

dir

'ltr' | 'rtl'

The document's text/writing direction.

disabled

boolean

Whether the switch is disabled.

form

string

The id of the form that the switch belongs to

getRootNode

() => ShadowRoot | Node | Document

A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

id

string

The unique identifier of the machine.

ids

Partial<{ root: string input: string control: string label: string thumb: string }>

The ids of the elements in the switch. Useful for composition.

invalid

boolean

If `true`, the switch is marked as invalid.

label

string

Specifies the localized strings that identifies the accessibility elements and their states

name

string

The name of the input field in a switch (Useful for form submission).

onCheckedChange

(details: CheckedChangeDetails) => void

Function to call when the switch is clicked.

readOnly

boolean

If `true`, the switch will be readonly

required

boolean

If `true`, the switch input is marked as required,

value

string | number

The value of switch input. Useful for form submission.

SwitchContext

controlProps

Dict<any>

hiddenInputProps

Dict<any>

isChecked

boolean

Whether the checkbox is checked

labelProps

Dict<any>

rootProps

Dict<any>

setChecked

(checked: boolean) => void

Function to set the checked state of the switch.

thumbProps

Dict<any>

toggleChecked

() => void

Function to toggle the checked state of the checkbox

isDisabled

boolean

Whether the checkbox is disabled

isFocused

boolean

Whether the checkbox is focused