# 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 %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.atomui.com/form-elements/switch.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
