Toggle switch

Toggle switches are used to switch between two possible states.

Examples

Base

Web Component
HTML Blueprint

<chi-switch id="toggle-ba1" label="Label"></chi-switch>

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

Base

Web Component
HTML Blueprint

<chi-switch id="toggle-portal-ba1" size="xs" label="Label"></chi-switch>

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

Checked

Use the checked boolean attribute to set the default value of a toggle switch to true.

Web Component
HTML Blueprint

<chi-switch id="toggle-ch1" label="Label" checked></chi-switch>

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

Checked

Use the checked boolean attribute to set the default value of a toggle switch to true.

Web Component
HTML Blueprint

<chi-switch id="toggle-portal-ch1" label="Label" checked></chi-switch>

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

Disabled

Use the disabled boolean attribute to prevent users from interacting with an input. Disabled inputs are not submitted with the form and can not receive any browsing events such as mouse clicks or focus. Note: The required attribute can not be used on inputs with a disabled attribute specified.

Web Component
HTML Blueprint

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

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

<chi-switch id="toggle-portal-di1" label="Label" disabled></chi-switch>

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

Layout Variations

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>

Stacked

Web Component
HTML Blueprint

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

<fieldset>
  <legend class="chi-label">Configure options</legend>
  <div class="chi-form__item">
    <label class="chi-switch -xs" for="portal-toggle3">
      <input type="checkbox" class="chi-switch__input" id="portal-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 -xs" for="portal-toggle4">
      <input type="checkbox" class="chi-switch__input" id="portal-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>

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="portal-toggle5" size="xs" label="Label"></chi-switch>
</div>
<div class="chi-form__item -inline">
  <chi-switch id="portal-toggle6" size="xs" 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 -xs" for="portal-toggle5">
      <input type="checkbox" class="chi-switch__input" id="portal-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 -xs" for="portal-toggle6">
      <input type="checkbox" class="chi-switch__input" id="portal-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 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 -xs" for="portal-toggle10">
        <span class="chi-switch__label">Label</span>
        <input type="checkbox" class="chi-switch__input" id="portal-toggle10">
        <span class="chi-switch__content">
          <span class="chi-switch__thumb"></span>
        </span>
      </label>
    </li>
    <li class="chi-form__item">
      <label class="chi-switch -xs" for="portal-toggle11">
        <span class="chi-switch__label">Label</span>
        <input type="checkbox" class="chi-switch__input" id="portal-toggle11">
        <span class="chi-switch__content">
          <span class="chi-switch__thumb"></span>
        </span>
      </label>
    </li>
    <li class="chi-form__item">
      <label class="chi-switch -xs" for="portal-toggle12">
        <span class="chi-switch__label">Label</span>
        <input type="checkbox" class="chi-switch__input" id="portal-toggle12">
        <span class="chi-switch__content">
          <span class="chi-switch__thumb"></span>
        </span>
      </label>
    </li>
    <li class="chi-form__item">
      <label class="chi-switch -xs" for="portal-toggle13">
        <span class="chi-switch__label">Label</span>
        <input type="checkbox" class="chi-switch__input" id="portal-toggle13">
        <span class="chi-switch__content">
          <span class="chi-switch__thumb"></span>
        </span>
      </label>
    </li>
    <li class="chi-form__item" for="portal-toggle14">
      <label class="chi-switch -xs">
        <span class="chi-switch__label">Label</span>
        <input type="checkbox" class="chi-switch__input" id="portal-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>

Switch with Left Label

Label

Web Component
HTML Blueprint

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

Switch with Hidden Label

Web Component
HTML Blueprint

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>

Switch with Hidden Label

Web Component
HTML Blueprint

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="portal-toggle8" size="xs" 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 -xs -label--hide" for="portal-toggle8">
    <input type="checkbox" class="chi-switch__input" id="portal-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>

Sizes

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

Web Component
HTML Blueprint

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

<!-- sm -->
<div class="chi-form__item">
  <chi-switch id="toggle18" 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="toggle17">
    <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="toggle18">
    <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