A control that allows the user to toggle between checked and not checked.

SwitchInputProps

The controlled state of the switch. Must be used in conjunction with `onCheckedChange`.

checked

Icon shown inside the thumb of the Switch whenever it is checked

The state of the switch when it is initially rendered. Use when you do not need to control its state.

When `true`, prevents the user from interacting with the switch.

The name of the switch. Submitted with its owning form as part of a name/value pair.

Event handler called when the state of the switch changes.

When true, indicates that the user must check the switch before the owning form can be submitted.

Icon shown inside the thumb of the Switch whenever it is unchecked

The value given as data when submitted with a name.

Change the component to the HTML tag or custom component of the only child.

When true, prevents the user from interacting with the switch item.

The id of the element the label is associated with.

Attribute	Type	Description	Default
defaultChecked	`boolean`	The state of the switch when it is initially rendered. Use when you do not need to control its state.	`null`
checked	`boolean`	The controlled state of the switch. Must be used in conjunction with `onCheckedChange`.	`null`
onCheckedChange	`(checked: boolean) => void`	Event handler called when the state of the switch changes.	`null`
disabled	`boolean`	When `true`, prevents the user from interacting with the switch.	`null`
required	`boolean`	When true, indicates that the user must check the switch before the owning form can be submitted.	`null`
name	`string`	The name of the switch. Submitted with its owning form as part of a name/value pair.	`null`
value	`string`	The value given as data when submitted with a name.	`null`
checkedIcon	`ReactNode`	Icon shown inside the thumb of the Switch whenever it is checked	`null`
uncheckedIcon	`ReactNode`	Icon shown inside the thumb of the Switch whenever it is unchecked	`null`
size	`"sm"` \| `"md"`	-	`md`
intent	`"main"` \| `"support"` \| `"accent"` \| `"basic"` \| `"success"` \| `"alert"` \| `"error"` \| `"info"` \| `"neutral"`	-	`null`