import { ToggleSwitch } from '@uhg-abyss/mobile';() => { const form = useForm();
return ( <FormProvider state={form}> <ToggleSwitch model="toggle-switch-sandbox" /> </FormProvider> );};Usage
The toggle switch adapts its style based on the operating system. Use the system dropdown at the top right of the screen to update.
useForm (recommended)
Using the useForm hook with FormProvider sets state for the component.
useState
Using the useState hook gets values from the component state.
isDisabled
The isDisabled prop when set to true will cause the ToggleSwitch to be rendered in a disabled state, preventing user interaction and providing visual feedback that the component cannot be toggled.
showAccessibilityIcon
The showAccessibilityIcon prop when set to true will cause the ToggleSwitch to be rendered with the accessibility icon.
ToggleSwitch Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
isChecked | boolean | undefined | - | - | Sets toggle status |
isDisabled | boolean | undefined | - | - | Flag to disable ToggleSwitch |
model | never | string | undefined | - | - | model is only used when the input is bound to a form via useForm. Model name used to bind the input to the form state. Only used inside a FormProvider. |
onChange | (value: boolean) => void | undefined | - | - | Callback fired when the value changes. Passes in the new value of the switch |
showAccessibilityIcon | boolean | undefined | - | - | Flag to show the accessibility icon |
validations | Validations | undefined | - | - | Set rules for the input to be valid. Valid in both useState and useForm modes. Set rules for the input to be valid. |
ToggleSwitch Classes
| Class Name | Description |
|---|---|
| abyss-toggle-switch-root | ToggleSwitch root element |
| abyss-toggle-switch-circle | ToggleSwitch Thumb element |
Dynamic Type
ToggleSwitch scales up to 3XL.
ToggleSwitch Tokens
| Token Name | Value | |
|---|---|---|
| toggle-switch.color.surface.container.default | #929496 | |
| toggle-switch.color.surface.container.selected | #196ECF | |
| toggle-switch.color.surface.container.disabled | #CBCCCD | |
| toggle-switch.color.surface.thumb.default | #FFFFFF | |
| toggle-switch.color.surface.thumb.disabled | #929496 | |
| toggle-switch.border-radius.all.container | 500 | |
| toggle-switch.border-radius.all.thumb | 500 | |
| toggle-switch.sizing.all.thumb.ios | 28 | |
| toggle-switch.sizing.all.thumb.android | 20 | |
| toggle-switch.sizing.all.icon.accessibility.ios | 24 | |
| toggle-switch.sizing.all.icon.accessibility.android | 16 | |
| toggle-switch.sizing.height.container.ios | 32 | |
| toggle-switch.sizing.height.container.android | 14 | |
| toggle-switch.sizing.width.container.ios | 56 | |
| toggle-switch.sizing.width.container.android | 40 | |
| toggle-switch.spacing.padding.all.container.ios | 2 | |
| toggle-switch.box-shadow.thumb.android |
|