Switch beta

A switch represents a physical switch that allows someone to choose between two mutually exclusive options. For example, “On/Off” and “Show/Hide”. Choosing an option should produce an immediate result.

Checked

By default, switch will display in the unchecked state. To set the switch to the checked state, add the checked attribute.

<ch-switch label="This is a switch" checked>
  <span slot="checked-message">On</span>
  <span slot="unchecked-message">Off</span>
</ch-switch>

Disable

Add the disabled attribute to the switch component to deactivate the switch.

<ch-switch label="This is a switch" disabled>
  <span slot="checked-message">On</span>
  <span slot="unchecked-message">Off</span>
</ch-switch>

Label

A label can be provided to the Switch by using the label attribute. The label can positioned above, before or after the component by using the label-position attribute.

<ch-switch label="This is a switch" label-position="top">
  <span slot="checked-message">On</span>
  <span slot="unchecked-message">Off</span>
</ch-switch>

API