Bauhaus Design System

Switch ​

Molecule

Usage ​

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 

        
          

            <
            Switch

            






            

                tooltipPosition
              
                =
                "top-center"
              


                label
              
                =
                "Label"
              


                labelCategory
              
                =
                "compact"
              


                clickableLabel
              


                colorVariant
              
                =
                "lila"
              





  />

Anatomy ​

  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. FormLabel - explains what the switch does. Can be hidden.

  4. Container - Clickable area.

States ​

  • Default, Hover, Pressed, Focus and Locked

Properties ​

This are the main properties for this component.

ts
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:

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

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