Switch

Overview

A switch is used to quickly switch between two possible states. They are commonly used for “on/off” switches.

A switch is used to quickly switch between boolean values. Switches are used to initiate binary actions that occur immediately after the user “flips the switch”. They are commonly used as “on/off” switches or to immediately activate or deactivate something.

When to use

• Form: Used in a form to affect which form fields appear.
• Settings: Used to turn settings on or off in a page.

When not to use

• Do not nest switches inside inputs.
• Do not use switches to select items in a list, instead use radios or checkboxes.

Design Notes

Always use labels with a switch so the action is clear. Labels should be three words or less and appear adjacent to the switch. Use adjectives rather than verbs to describe labels and the state of the object affected. There is no disabled state for switches. If it cannot be used it does not appear in the UI. When a user toggles a switch, its corresponding action takes effect immediately.

Interactive demo

The demo below allows you to preview the component. You can play with its props, variations, configuration options and dive into its events and even see them trigger in the event log tab.

MedKit Switch

Label

Props Help

For each property in a component you can see:

• value-type
  that it supports
• The default
  value
• If the prop is
  required

Container Hidden

boolean

false

Defines whether the switch is wrapped in a container or not.

Toggle Prop

Label

string

Required

The label to be shown beside the switch.

 

Label Hidden

boolean

false

Only display the label for screen readers.

Toggle Prop

Label Position

SwitchLabelPosition

type SwitchLabelPosition = typeof switchLabelPositions[number];

end

Defines which side or alignment the label has to the controller.

 

startend

Size

SwitchSize

type SwitchSize = typeof switchSizes[number];

large

The size of the container.

 

mediumlarge

Default

Label

<template>
  <DocExample>
    <MedKitSwitch label="Label" />
  </DocExample>
</template>

Without Container

The switch can be used with or without a container. The switch in a container has more impact on the page, therefore it could be used within forms. The switch without a container has less impact on the page and is more compact, therefore it’s best pared with other elements to make it clear that state has changed.

Label

<template>
  <DocExample>
    <MedKitSwitch label="Label" container-hidden />
  </DocExample>
</template>

Container Size

Large

Medium

<template>
  <DocExample>
    <MedKitSwitch label="Large" />
    <MedKitSwitch label="Medium" size="medium" />
  </DocExample>
</template>

Figma Library

You can find the component in our MedKit Figma library.