Bauhaus Design System

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 

        
          

            <
            Switch

            






            

                label
              
                =
                "Label Name"
              


                size
              
                =
                "default"
              


                clickableLabel
              


                colorVariant
              
                =
                "lila"
              





  />

ModelValues

For more information on ModelValues please have a look to the Vue's Data Binding section.

ts
const modelValue = defineModel<boolean>({ required: true });

Properties ​

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

export interface SwitchProps extends Omit<FormLabelOptionalProps, 'labelPosition'> {
  colorVariant?: SwitchColorVariant;
}
ts
export type FormLabelCategory = 'tiny' | "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 ​

  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. Form Label - nested Form Label component. Explains what the switch does. Can be hidden.
  4. Container - Clickable area.
States
  • Default, Hover, Pressed, Focus Visible and Locked
Variants
Toggle
  • Indicates whether the feature is enabled (on) or disabled (off).
Color
  • Lila or Grape
Size
  • Default or Tiny.
Form Label
  • Show or hide Form Label.