Switch

Molecule

Shows the actual status of something. It can be used to toggle a single item or condition on or off in a form, or to immediately activate or deactivate something. 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. Unlike Checkbox which has a delayed execution, or Radio Select which shouldn’t be used to toggle items on or off.

Playground

Label

Label Size

Color Variant

Lila

Clickable Label

Disabled

Required

Label

        
          
            <
            Switch

            





            
                label
              
                =
                "Label"
              

                labelCategory
              
                =
                "compact"
              

                clickableLabel
              

                colorVariant
              
                =
                "lila"
              



  />

Properties

This are the main properties for this component.

export type SwitchColorVariant = 'lila' | 'grape';

export interface SwitchProps extends Omit<FormLabelOptionalProps, 'labelPosition'> {
  modelValue: boolean;
  colorVariant?: SwitchColorVariant;
}

It is also extending the following props from FormLabelOptionalProps:

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

export interface FormLabelProps extends TooltipProps, Omit<Partial<HelpTextProps>, 'category'>, ElementProps {
  label?: string;
  labelCategory?: FormLabelCategory;
  labelPosition?: FormLabelPosition,
  disabled?: boolean;
  required?: boolean;
  infoIcon?: boolean;
  clickableLabel?: boolean;
  helpTextIcon?: IconName;
  helpTextCategory?: HelpTextProps['category'];
  /**
   * @deprecated Use `helpTextCategory` instead. Will be removed in the next major release.
   */
  category?: HelpTextProps['category'];
}

Anatomy

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.
Track - is the path of Thumb’s travel.
FormLabel - explains what the switch does. Can be hidden.
Container - Clickable area.

States

Default, Hover, Pressed, Focus and Locked

Variants

Toggle

Indicates whether the feature is enabled (on) or disabled (off).

Color

Lila or Grape

Size

Switch Component can be constructed with the Default size Form Label and Large size Form Label, therefore there are 2 types.

Form Label

Show or hide Form Label.

Switch ​