Back to Developer Roadmap

Input Switch

src/data/roadmaps/design-system/content/[email protected]

4.0629 B
Original Source

Input Switch

Input switches toggle the state of a single item. Compared to the input checkbox, their changes usually apply without any additional submission.

  • Checked State: Used when an input switch is turned on. It’s better to provide an additional way to indicate the checked state besides changing its colour when applicable.
  • Disabled State: Prevents interacting with an input switch.
  • Label: There should be a text label linked with the switch field. Clicking the label should also trigger the input selection.
  • Keyboard State: A switch selection should be triggered when the Space key is pressed.