Toggle

cds-toggle

The Toggle component is used to switch between two states, such as on/off, active/inactive, or enabled/disabled. It provides users with an intuitive way to interact with settings or preferences in the interface.

Default

• Size: --medium

Default toggle

Default badge

<div class="cds-toggle">
  <input type="checkbox" id="toggle_id" />
  <label class="cds-toggle__switch" for="toggle_id"></label>
  <span class="cds-toggle__text">Default toggle</span>
</div>

---

Elements

Element	Code	Parent	HTML tag	Required
Switch	cds-toggle__switch	Block: cds-toggle	<label>	required
Text	cds-toggle__text	Block: cds-toggle	<span>	optional

Default toggle

---

---

Default toggle

<div class="cds-toggle">
  <span class="cds-toggle__text">Default toggle</span>
  <input type="checkbox" id="toggleid6" />
  <label class="cds-toggle__switch" for="toggleid6"></label>
</div>

---

Modifiers

Modifier	Options
Size	--medium, --large

---

Size

---

<div class="cds-toggle cds-toggle--large">
  <input type="checkbox" id="toggle_id" />
  <label class="cds-toggle__switch" for="toggle_id"></label>
</div>

---

States

Modifier	Options
States	is-disabled

Is disabled

Toggle unchecked

Toggle checked

---

Toggle disabled unchecked

Toggle disabled checked

Example

<div class="cds-toggle">
  <input type="checkbox" disabled />
  <label class="cds-toggle__switch"></label>
  <span class="cds-toggle__text">Disabled default</span>
</div>