Switch

Act like native checkbox, switch allows you to toggle an option on and off.

<cc-switch>Remote only</cc-switch>

Examples

Checked

Add a checked attribute to indicate this switch is checked by default (when the page loads). If the switch’s state is changed, this checked attribute will reflect the change.

<cc-switch checked>Remote only</cc-switch>

Reverse Layout

<cc-switch checked layout="reverse">Remote only</cc-switch>

Helper Text

Helper text can be added via helper-text attribute, or by using slot helper-text.

<cc-switch helper-text="Hierarchical post types can have descendants (like pages).">
  Hierarchical
</cc-switch>
<cc-switch>
  Public
  <span slot="helper-text">
    Visible on the frontend and in the admin dashboard.
  </span>
</cc-switch>

Label Position Top

TODO: a 3-column grid layout cc-grid should be better for this case? As I need to have these 3 div equal width.

Value

When a form is submitted, only checkboxes (cc-switch in this case) which are currently checked are submitted to the server, and the reported value is the value of the value attribute. If the value is not otherwise specified, it is the string `on“ by default.

<form id="cc-switch-form">
  <cc-switch value="remote-only" name="position-type">
    Remote only
  </cc-switch>
  <cc-button type="submit">Submit</cc-button>
</form>
<script>
  document.querySelector('#cc-switch-form').addEventListener('submit', function (event) {
    event.preventDefault();
    alert(new FormData(this).get('position-type'));
  });
</script>

Sizes

Use the size attribute to change a cc-switch’s size.

<cc-switch size="small">Remote only</cc-switch>
<!-- default to medium -->
<cc-switch size="medium">Remote only</cc-switch>
<cc-switch size="large">Remote only</cc-switch>

Custom Size

Change font size to get a custom size.

<cc-switch style="font-size: 2rem;">Remote only</cc-switch>

Disabled

<cc-switch disabled>Remote only</cc-switch>