Toggle Switch

Toggle switches are used to switch between two possible states.

Examples

Base

Web Component
HTML Blueprint

<chi-switch id="toggle1" label="Label"></chi-switch>

<div class="chi-form__item">
  <label class="chi-switch" for="toggle1">
    <input type="checkbox" class="chi-switch__input" id="toggle1">
    <span class="chi-switch__content">
      <span class="chi-switch__thumb"></span>
    </span>
    <span class="chi-switch__label">Label</span>
  </label>
</div>

Disabled

Web Component
HTML Blueprint

<chi-switch id="toggle2" label="Label" disabled></chi-switch>

<div class="chi-form__item">
  <label class="chi-switch" for="toggle2">
    <input type="checkbox" class="chi-switch__input" name="toggle2" value="toggle2" disabled>
    <span id="toggle2" class="chi-switch__content">
      <span class="chi-switch__thumb"></span>
    </span>
    <span class="chi-switch__label">Label</span>
  </label>
</div>

Stacked

Web Component
HTML Blueprint

<div class="chi-form__item">
  <chi-switch id="toggle3" label="Label"></chi-switch>
</div>
<div class="chi-form__item">
  <chi-switch id="toggle4" label="Label"></chi-switch>
</div>

<fieldset>
  <legend class="chi-label">Configure options</legend>
  <div class="chi-form__item">
    <label class="chi-switch" for="toggle3">
      <input type="checkbox" class="chi-switch__input" id="toggle3">
      <span class="chi-switch__content">
        <span class="chi-switch__thumb"></span>
      </span>
      <span class="chi-switch__label">Label</span>
    </label>
  </div>
  <div class="chi-form__item">
    <label class="chi-switch" for="toggle4">
      <input type="checkbox" class="chi-switch__input" id="toggle4">
      <span class="chi-switch__content">
        <span class="chi-switch__thumb"></span>
      </span>
      <span class="chi-switch__label">Label</span>
    </label>
  </div>
</fieldset>

Inline

Web Component
HTML Blueprint

Apply the -inline class to chi-form__item for displaying toggle switches inline.

<div class="chi-form__item -inline">
  <chi-switch id="toggle5" label="Label"></chi-switch>
</div>
<div class="chi-form__item -inline">
  <chi-switch id="toggle6" label="Label"></chi-switch>
</div>

Apply the class -inline to chi-form__item to display switches inline.

<fieldset>
  <legend class="chi-label">Configure options</legend>
  <div class="chi-form__item -inline">
    <label class="chi-switch" for="toggle5">
      <input type="checkbox" class="chi-switch__input" id="toggle5">
      <span class="chi-switch__content">
        <span class="chi-switch__thumb"></span>
      </span>
      <span class="chi-switch__label">Label</span>
    </label>
  </div>
  <div class="chi-form__item -inline">
    <label class="chi-switch" for="toggle6">
      <input type="checkbox" class="chi-switch__input" id="toggle6">
      <span class="chi-switch__content">
        <span class="chi-switch__thumb"></span>
      </span>
      <span class="chi-switch__label">Label</span>
    </label>
  </div>
</fieldset>

Switch list

Switch lists are used to wrap a series of switches in a list. To render, apply the class -list to chi-form__item.

Web Component
HTML Blueprint

<fieldset>
  <legend class="chi-label">Select options</legend>
  <ul class="chi-form__item -list">
    <li class="chi-form__item">
      <label class="chi-switch" for="toggle10">
        <span class="chi-switch__label">Label</span>
        <input type="checkbox" class="chi-switch__input" id="toggle10">
        <span class="chi-switch__content">
          <span class="chi-switch__thumb"></span>
        </span>
      </label>
    </li>
    <li class="chi-form__item">
      <label class="chi-switch" for="toggle11">
        <span class="chi-switch__label">Label</span>
        <input type="checkbox" class="chi-switch__input" id="toggle11">
        <span class="chi-switch__content">
          <span class="chi-switch__thumb"></span>
        </span>
      </label>
    </li>
    <li class="chi-form__item">
      <label class="chi-switch" for="toggle12">
        <span class="chi-switch__label">Label</span>
        <input type="checkbox" class="chi-switch__input" id="toggle12">
        <span class="chi-switch__content">
          <span class="chi-switch__thumb"></span>
        </span>
      </label>
    </li>
    <li class="chi-form__item">
      <label class="chi-switch" for="toggle13">
        <span class="chi-switch__label">Label</span>
        <input type="checkbox" class="chi-switch__input" id="toggle13">
        <span class="chi-switch__content">
          <span class="chi-switch__thumb"></span>
        </span>
      </label>
    </li>
    <li class="chi-form__item" for="toggle14">
      <label class="chi-switch">
        <span class="chi-switch__label">Label</span>
        <input type="checkbox" class="chi-switch__input" id="toggle14">
        <span class="chi-switch__content">
          <span class="chi-switch__thumb"></span>
        </span>
      </label>
    </li>
  </ul>
</fieldset>

Switch with Left Label

Label

Web Component
HTML Blueprint

<div class="chi-form__item">
  <label class="chi-switch" for="toggle7">
    <span class="chi-switch__label">Label</span>
    <input type="checkbox" class="chi-switch__input" id="toggle7">
    <span class="chi-switch__content">
      <span class="chi-switch__thumb"></span>
    </span>
  </label>
</div>

Apply the hide-label attribute to chi-switch to render a switch without a label. Use this method for rendering switches in close proximity to other text that clearly describes its purpose.

<div class="chi-form__item">
  <chi-switch id="toggle8" label="Label" hide-label></chi-switch>
</div>

Apply the class -label--hide to chi-switch to render a switch without a label. Use this method for rendering switches in close proximity to other text that clearly describes its purpose.

<div class="chi-form__item">
  <label class="chi-switch -label--hide" for="toggle8">
    <input type="checkbox" class="chi-switch__input" id="toggle8">
    <span class="chi-switch__content">
      <span class="chi-switch__thumb"></span>
    </span>
    <span class="chi-switch__label">Label</span>
  </label>
</div>

Sizes

Toggle switch supports different sizes: -xs, -sm. The default size is -sm.

Web Component
HTML Blueprint

<!-- xs -->
<div class="chi-form__item">
  <chi-switch id="toggle15" label="Label" size="xs"></chi-switch>
</div>

<!-- sm -->
<div class="chi-form__item">
  <chi-switch id="toggle16" label="Label" size="sm"></chi-switch>
</div>

<!-- xs -->
<div class="chi-form__item">
  <label class="chi-switch -xs" for="toggle15">
    <input type="checkbox" class="chi-switch__input" id="toggle15">
    <span class="chi-switch__content">
      <span class="chi-switch__thumb"></span>
    </span>
    <span class="chi-switch__label">Label</span>
  </label>
</div>

<!-- sm -->
<div class="chi-form__item">
  <label class="chi-switch -sm" for="toggle16">
    <input type="checkbox" class="chi-switch__input" id="toggle16">
    <span class="chi-switch__content">
      <span class="chi-switch__thumb"></span>
    </span>
    <span class="chi-switch__label">Label</span>
  </label>
</div>

Web Component

Properties

Property	Attribute	Description	Type	Default
`checked`	`checked`	used to check the toggle switch.	`boolean`	`false`
`disabled`	`disabled`	used to disable the toggle switch.	`boolean`	`false`
`hideLabel`	`hide-label`	used to disable the toggle labels.	`boolean`	`false`
`label`	`label`	to set a label for the toggle switch.	`string`	undefined
`size`	`size`	OPTIONAL. Size of the label. {xs,sm}.	`string`	undefined

Events

Event	Description	Type
`toggle`	emitting a custom event toggle.	`CustomEvent<any>`

Accessibility

Accessibility guidelines coming soon