import { ToggleSwitch } from '@uhg-abyss/mobile';

isDisabled

showAccessibilityIcon

() => {
  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

Prop Name	Type	Default	Description
isChecked	boolean	false	Sets toggle status
isDisabled	boolean	false	Flag to disable ToggleSwitch
onChange	function	-	Callback fired when the value changes
showAccessibilityIcon	boolean	false	Flag to show the accessibility icon

ToggleSwitch Classes

Class Name	Description
abyss-toggle-switch-circle	ToggleSwitch Thumb element
abyss-toggle-switch-root	ToggleSwitch root element

Dynamic Type

ToggleSwitch scales up to 3XL.

Search tokens

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	Shadow Color: rgba(0,0,0,0.5) Shadow Offset: Width: 0 Height: 1 Shadow Opacity: 1 Shadow Radius: 4