# Toggle

> Part of mCSS (mcss.dev). Rendered page: https://mcss.dev/components/toggle

The toggle is a [CSS-only component](/docs/start#components) using the `.toggle` class on `<input>` elements of the type `checkbox`.

<input class="toggle mt-sm3" type="checkbox" checked />

<div class="docs_oversizedTable">

| File              | Description | Source      |
| ----------------- | ----------- | ----------- |
| `component.toggle.css` | All toggle styles (`.toggle`) | [Github][1] |

</div>

[1]: https://github.com/minimaldesign/mCSS/blob/main/src/styles/framework/component.toggle.css

## Playground

<Playground
  client:visible
  template={'<input class="{classes}" type="checkbox"{attrs} />'}
  baseClasses="toggle"
  controls={[
    { heading: "State", items: [
      { type: "checkbox", name: "checked", label: "Checked", attr: "checked", default: true },
      { type: "checkbox", name: "disabled", label: "Disabled", attr: "disabled", default: false },
    ]},
  ]}
/>

## HTML

<ul class="docs_examples">
  <li>
    <input class="toggle" type="checkbox" />
    ```html
    <input class="toggle" type="checkbox" />
    ```
  </li>
</ul>