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

Name	Type	A11y	Description
isChecked	boolean | undefined		Sets toggle status
isDisabled	boolean | undefined		Flag to disable ToggleSwitch
model	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

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.

ToggleSwitch Tokens

Search 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.color.icon.default	#929496
toggle-switch.color.icon.selected	#196ECF
toggle-switch.color.icon.disabled	#FFFFFF
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