Skip to main content
Version: Current

Web Components - Switch

info

For information about creating forms and using our web components, see our pages on Forms.

An implementation of a switch as a form-connected Web Component.

Set-up

import { provideDesignSystem, alphaSwitch } from '@genesislcap/alpha-design-system';

provideDesignSystem().register(alphaSwitch());

Usage

Live Editor
<alpha-switch>
  Theme
  <span slot="checked-message">Dark</span>
  <span slot="unchecked-message">Light</span>
</alpha-switch>
Result
Loading...

Use cases

  • Toggling visibility of a UI section
  • Disabling & enabling features

Additional resources