Switch
Slidable button that toggles between two-states.
Import
Usage
Variants
Label
Description
Icons
Initial value
Disabled
Props
Switch
| Prop | Type | Default | Description |
|---|
isActive | boolean | false | Initial state of the switch |
onActive | () => Promise<void> | void | - | Callback function when switch is on |
onDeactive | () -> Promise<void> | void | - | Callback function when switch is off |
disabled | boolean | false | Prevents the user from toggling the switch |
children* | JSX.Element | - | Expecting <Switch.Track> and if applicable <Switch.Meta> |
Switch.Track
| Prop | Type | Default | Description |
|---|
children* | JSX.Element | - | Expecting <Switch.Thumb> |
Switch.Thumb
| Prop | Type | Default | Description |
|---|
children | JSX.Element | - | In case of icons, children must be the icon component |
| Prop | Type | Default | Description |
|---|
children* | JSX.Element | - | Expecting either <Switch.Label> and/or <Switch.Description> |
Switch.Label
| Prop | Type | Default | Description |
|---|
children* | string | - | Title of the switch input |
Switch.Description
| Prop | Type | Default | Description |
|---|
children* | string | - | Extra information about the switch input |
*: mandatory props
