Switch
The Switch component allows users to toggle between checked and unchecked states. It is commonly used for managing settings and preferences, enabling or disabling specific features with a simple click, offering a clear and intuitive control mechanism.
Additional Examples
As Form Field
Configurable Props
<Switch>
Prop | Type | Default/ Options | Description |
|---|---|---|---|
defaultChecked | boolean | The state of the switch when it is initially rendered. Use when you do not need to control its state. | |
checked | boolean | The controlled state of the switch. Must be used in conjunction with onCheckedChange. | |
onCheckedChange | function (checked: boolean) => void | Event handler called when the state of the switch changes. | |
disabled | boolean | When true, prevents the user from interacting with the switch. | |
required | boolean | When true, indicates that the user must check the switch before the owning form can be submitted. | |
name | string | The name of the switch. Submitted with its owning form as part of a name/value pair. | |
value | string | The value given as data when submitted with a name. |