> For the complete documentation index, see [llms.txt](https://docs.atomui.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.atomui.com/form-elements/switch.md).

# Switch

We have created css only switches in atmos, so you do not need to include any additional css or JavaScript files into your project, moreover they also support default browser based validation without any additional configuration.

<div align="left"><img src="/files/-LUKxPhUOeP2fcMDI79b" alt=""></div>

```markup
<label class="cstm-switch">
    <input type="checkbox" name="option" value="1" class="cstm-switch-input">
    <span class="cstm-switch-indicator "></span>
    <span class="cstm-switch-description">Switch </span>
</label>

<label class="cstm-switch">
    <input type="checkbox" checked name="option" value="1" class="cstm-switch-input">
    <span class="cstm-switch-indicator "></span>
    <span class="cstm-switch-description">Switch </span>
</label>

<label class="cstm-switch">
    <input type="checkbox" checked name="option" value="1" class="cstm-switch-input">
    <span class="cstm-switch-indicator bg-success "></span>
    <span class="cstm-switch-description">Switch success</span>
</label>


<label class="cstm-switch">
    <input type="checkbox" checked name="option" value="1" class="cstm-switch-input">
    <span class="cstm-switch-indicator bg-info "></span>
    <span class="cstm-switch-description">Switch info</span>
</label>

<label class="cstm-switch">
    <input type="checkbox" checked name="option" value="1" class="cstm-switch-input">
    <span class="cstm-switch-indicator bg-warning "></span>
    <span class="cstm-switch-description">Switch warning</span>
</label>

<label class="cstm-switch">
    <input type="checkbox" checked name="option" value="1" class="cstm-switch-input">
    <span class="cstm-switch-indicator bg-danger "></span>
    <span class="cstm-switch-description">Switch Danger</span>
</label>
```

```markup
```

### Switch as radio

You can use switch as checkbox as well as radio just change the input type to radio for radio buttons

```markup
<label class="cstm-switch">
    <input type="radio" checked name="option" value="1" class="cstm-switch-input">
    <span class="cstm-switch-indicator bg-danger "></span>
    <span class="cstm-switch-description">Switch Danger</span>
</label>
```

### Switch Size

Just add `.size-lg` to `.custom-switch-indicator`  for large sizes.

<div align="left"><img src="/files/-LUKyl9hnvRuyRxpESnb" alt=""></div>

```markup
<label class="cstm-switch ">
    <input type="checkbox" required name="option" value="1"
           class="cstm-switch-input ">
    <span class="cstm-switch-indicator size-lg "></span>
    <span class="cstm-switch-description">Large Switch #1</span>
</label>
<label class="cstm-switch m-l-10 ">
    <input type="checkbox" required name="option" value="1"
           class="cstm-switch-input ">
    <span class="cstm-switch-indicator size-lg "></span>
    <span class="cstm-switch-description">Large Switch #2</span>
</label>
```

{% hint style="info" %}
You can check switch.scss  for further customization
{% endhint %}
