Switch

Usage

Switch shows the actual status of something. It can be used to:

• Toggle a single item or condition on or off in a form.
• Immediately activate or deactivate something.

Differences among Switch, Checkbox and Radio Select: Tapping a Switch is a two-step action: selection and execution, whereas a Checkbox is just selection of an option and the execution/saving action is usually required later on, or is in a separate location, such as after clicking ‘Save’. Radio Select conveys that a set of items are options and only one can be chosen among them, and they shouldn’t be used to toggle items on or off. Radio Select should be used instead of Checkboxes if only one item can be selected from a list.

Types

There is one type of Switch component but its default status can be either toggle On or toggle Off depending on the use case. However, there are two types of Label placements in the Switch: Label Right and Label Left.

Anatomy and Behavior

1. Thumb - represents the On or Off status of the Switch in addition to background color of Track. When Thumb is on the left it is Off, and when on the right side it is On.

2. Track - is the path of Thumb’s travel.

3. Label - is a mandatory part of the Switch component. Label is the description of what is being controlled by this particular switch. Labels can be as short as a word or a phrase or as long as a paragraph. By default Form Label atom is used here, but another text component can be used if a bigger text field is required or if the description requires a special formatting (e.g. paragraph, secondary text fields for smaller disclaimers, etc.). There is no need to include “on” and “off” text as part of Label since the switch is self explanatory.

4. Behavior The Switch, as its name suggests, switches on or off when user clicks on it. The function controls data being sent or not sent. When a user toggles a Switch, it’s corresponding action takes effect immediately.

States

Both toggle On and toggle Off statuses can have hover, active, focus, and Disabled states.

Gaps and Sizes

• Horizontal and vertical padding: 2XS
• Track width: XL plus
• Track height: M plus
• Track padding: 2XS
• Corner radius-Track: L plus
• Corner radius-Thumb: L plus

Form Label

Form Label

Form Label

Form Label

Form Label

Form Label

Tokens

SCSS Variable

Value

$switch-height

--gutter-m_plus

$switch-width

--gutter-xl

$switch-inner-gap

--gutter-2xs

$switch-thumb-size

--gutter-s

$switch-thumb-path

--gutter-m

$switch-animation--speed

200ms

$switch-label-margin

--gutter-xl

$switch-thumb-bgColor

--color-grey-98

$switch-on-track-bgColor

--bds-brand-primary-color

$switch-thumb-bgColor--locked

--color-grey-86

$switch-on-track-bgColor--locked

--bds-brand-bgColor--locked

$switch-outline-color--focus

--color-azure-45

$switch-off-track-bgColor

--color-grey-90

$switch-off-track-bgColor--locked

--color-grey-86

$switch-on-track-boxShadow

none

$switch-on-thumb-boxShadow

--elevation-1

$switch-track-boxShadow--locked

none

$switch-thumb-boxShadow--locked

none

$switch-track-boxShadow--hover

--embossed-1--grey-98

$switch-thumb-boxShadow--hover

--elevation-2

$switch-track-boxShadow--active

--bds-flatElement-brand--active

$switch-thumb-boxShadow--active

--elevation-1

$switch-off-track-boxShadow

--die-cut-05

$switch-off-track-boxShadow--hover

--die-cut-1

$switch-off-thumb-boxShadow

--elevation-1

$switch-off-thumb-boxShadow--hover

--elevation-2

$switch-track-cornerRadius

--gutter-l

$switch-thumb-cornerRadius

--gutter-l

Properties

This are the main properties for this component.

export interface SwitchProps extends FormLabelOptionalProps {
  modelValue: boolean;
  clickableLabel?: boolean;
}

It is also extending the following props from FormLabelOptionalProps:

export type FormLabelCategory = "compact" | "default";
export type FormLabelPosition = "labelLeading" | "labelTrailing" | "labelAbove";

export interface FormLabelProps extends TooltipProps {
  label?: string;
  tooltip?: string;
  labelCategory: FormLabelCategory;
  labelPosition: FormLabelPosition,
  disabled?: boolean;
  required?: boolean;
  clickableLabel?: boolean;
}

Configurations

On	Off	Required	Disabled On	Disabled Off
Label	Label	Label*	Label	Label

Switch
Size	Label Position
small
labelTrailing	Label
labelLeading	Label
medium
labelTrailing	Label
labelLeading	Label
big
labelTrailing	Label
labelLeading	Label