> For the complete documentation index, see [llms.txt](https://docs.quantumbyte.ai/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/39.toggle.md).

# Toggle

### Toggle Props <a href="#toggle-props" id="toggle-props"></a>

| Name                          | Type    | Default                                                       | Description                                                                                      |
| ----------------------------- | ------- | ------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ |
| checked                       | boolean | false                                                         | Defines whether the toggle input is checked or not                                               |
| colors                        | object  |                                                               | Object with Tailwind CSS colors classes                                                          |
| colors.bgIos                  | string  | 'bg-black bg-opacity-10 dark:bg-white dark:bg-opacity-20'     |                                                                                                  |
| colors.bgMaterial             | string  | 'bg-md-light-surface-variant dark:bg-md-dark-surface-variant' |                                                                                                  |
| colors.borderMaterial         | string  | 'border-md-light-outline dark:border-md-dark-outline'         |                                                                                                  |
| colors.checkedBgIos           | string  | 'bg-primary'                                                  |                                                                                                  |
| colors.checkedBgMaterial      | string  | 'bg-md-light-primary dark:bg-md-dark-primary'                 |                                                                                                  |
| colors.checkedBorderMaterial  | string  | 'border-md-light-primary dark:border-md-dark-primary'         |                                                                                                  |
| colors.checkedThumbBgIos      | string  | 'bg-white'                                                    |                                                                                                  |
| colors.checkedThumbBgMaterial | string  | 'bg-md-light-on-primary dark:bg-md-dark-on-primary'           |                                                                                                  |
| colors.thumbBgIos             | string  | 'bg-white'                                                    |                                                                                                  |
| colors.thumbBgMaterial        | string  | 'bg-md-light-outline dark:bg-md-dark-outline'                 |                                                                                                  |
| component                     | string  | 'label'                                                       | Component's HTML Element                                                                         |
| defaultChecked                | boolean | false                                                         | Defines whether the toggle input is checked or not, for the case if it is uncontrolled component |
| disabled                      | boolean | false                                                         | Defines whether the toggle input is disabled or not                                              |
| name                          | string  |                                                               | Toggle input name                                                                                |
| readonly                      | boolean | false                                                         | Defines whether the toggle input is readonly or not                                              |
| touchRipple                   | boolean | true                                                          | Enables touch ripple effect in Material theme                                                    |
| value                         | any     |                                                               | Toggle input value                                                                               |

### Toggle Events

| Name   | Type        | Description                         |
| ------ | ----------- | ----------------------------------- |
| change | function(e) | Toggle input `change` event handler |

### Examples

{% tabs %}
{% tab title="Vue" %}

```typescript
<template>
  <i-page>
    <i-navbar title="Toggle" />

    <i-list strong inset>
      <i-list-item label title="Item 1">
        <template #after>
          <i-toggle
            component="div"
            class="-my-1"
            :checked="checked1"
            @change="() => (checked1 = !checked1)"
          />
        </template>
      </i-list-item>
      <i-list-item label title="Item 2">
        <template #after>
          <i-toggle
            component="div"
            class="-my-1 k-color-brand-red"
            :checked="checked2"
            @change="() => (checked2 = !checked2)"
          />
        </template>
      </i-list-item>
      <i-list-item label title="Item 3">
        <template #after>
          <i-toggle
            component="div"
            class="-my-1 k-color-brand-green"
            :checked="checked3"
            @change="() => (checked3 = !checked3)"
          />
        </template>
      </i-list-item>
      <i-list-item label title="Item 4">
        <template #after>
          <i-toggle
            component="div"
            class="-my-1 k-color-brand-yellow"
            :checked="checked4"
            @change="() => (checked4 = !checked4)"
          />
        </template>
      </i-list-item>
    </i-list>
  </i-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iList,
    iListItem,
    iToggle,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iList,
      iListItem,
      iToggle,
    },
    setup() {
      const checked1 = ref(true);
      const checked2 = ref(true);
      const checked3 = ref(true);
      const checked4 = ref(true);
      return {
        checked1,
        checked2,
        checked3,
        checked4,
      };
    },
  };
</script>
```

{% endtab %}

{% tab title="React" %}

```js
import React, { useState } from 'react';
import {
  Page,
  Navbar,
  NavbarBackLink,
  List,
  ListItem,
  Toggle,
} from 'ina-ui/react';

export default function TogglePage() {
  const [checked1, setChecked1] = useState(true);
  const [checked2, setChecked2] = useState(true);
  const [checked3, setChecked3] = useState(true);
  const [checked4, setChecked4] = useState(true);
  return (
    <Page>
      <Navbar
        title="Toggle"
        />

      <List strong inset>
        <ListItem
          label
          title="Item 1"
          after={
            <Toggle
              component="div"
              className="-my-1"
              checked={checked1}
              onChange={() => setChecked1(!checked1)}
            />
          }
        />
        <ListItem
          label
          title="Item 2"
          after={
            <Toggle
              component="div"
              className="-my-1 k-color-brand-red"
              checked={checked2}
              onChange={() => setChecked2(!checked2)}
            />
          }
        />
        <ListItem
          label
          title="Item 3"
          after={
            <Toggle
              component="div"
              className="-my-1 k-color-brand-green"
              checked={checked3}
              onChange={() => setChecked3(!checked3)}
            />
          }
        />
        <ListItem
          label
          title="Item 4"
          after={
            <Toggle
              component="div"
              className="-my-1 k-color-brand-yellow"
              checked={checked4}
              onChange={() => setChecked4(!checked4)}
            />
          }
        />
      </List>
    </Page>
  );
}
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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.quantumbyte.ai/home/quantumbyte-v2.0/3.microsites-1/8.ui/4.components/39.toggle.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.