Switch

Component: A locked height form component for the toggle of a property on/off. Inner element spacing is used for dynamic resizing along with a background surface.

Styleguide Link

Properties

Label

The component can be presented with a label to give context to the switch control. This label can be positioned in the following options...

  • Label Left, Control Left

  • Label Right, Control Right

  • Label Left, Control Right

  • Label Right, Control Left

Style

The styling of the switch can be altered to present a different appearance. For example, we could present an appearance to the control that's a bit more fancy in sign in screen than a pill switch control, with the same underlying functionality.

  • Base (Pill)

  • Rectangle

Note: Each of the nested elements and primitives of this form component have properties that can be adjusted to customize the component.

Last updated