> 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/9.checkbox.md).

# Checkbox

### Checkbox Props <a href="#checkbox-props" id="checkbox-props"></a>

| Name                         | Type    | Default                                                                   | Description                                                                                        |
| ---------------------------- | ------- | ------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------- |
| checked                      | boolean | false                                                                     | Defines whether the checkbox input is checked or not                                               |
| colors                       | object  |                                                                           | Object with Tailwind CSS colors classes                                                            |
| colors.bgCheckedIos          | string  | 'bg-primary'                                                              |                                                                                                    |
| colors.bgCheckedMaterial     | string  | 'bg-md-light-primary dark:bg-md-dark-primary'                             |                                                                                                    |
| colors.borderCheckedIos      | string  | 'border-primary'                                                          |                                                                                                    |
| colors.borderCheckedMaterial | string  | 'border-md-light-primary dark:border-md-dark-primary'                     |                                                                                                    |
| colors.borderIos             | string  | 'border-black border-opacity-30 dark:border-white dark:border-opacity-30' |                                                                                                    |
| colors.borderMaterial        | string  | 'border-md-light-outline dark:border-md-dark-outline'                     |                                                                                                    |
| component                    | string  | 'label'                                                                   | Component's HTML Element                                                                           |
| defaultChecked               | boolean | false                                                                     | Defines whether the checkbox input is checked or not, for the case if it is uncontrolled component |
| disabled                     | boolean | false                                                                     | Defines whether the checkbox input is disabled                                                     |
| indeterminate                | boolean | false                                                                     | Defines whether the checkbox input is in indeterminate state or not                                |
| name                         | string  |                                                                           | Checkbox input name                                                                                |
| readonly                     | boolean | false                                                                     | Defines whether the checkbox input is readonly                                                     |
| touchRipple                  | boolean | true                                                                      | Enables touch ripple effect in Material theme                                                      |
| value                        | any     |                                                                           | Checkbox input value                                                                               |

### Checkbox Events

| Name   | Type        | Description                                         |
| ------ | ----------- | --------------------------------------------------- |
| change | function(e) | Event will be triggered when checkbox state changed |

### Checkboxes List

Checkboxes List is not a separate component, but just a particular case of using `List` and `ListItem` components.

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

```typescript
<k-list>
  <!-- Additional "label" prop on ListItem -->
  <k-list-item
    label
    title="Books"
  >
    <template #media>
      <!-- Pass Checkbox to list item media -->
      <k-checkbox component="div" name="my-checkbox" />
    </template>
  </k-list-item>
  <k-list-item
    label
    title="Movies"
  >
    <template #media>
      <!-- Pass Checkbox to list item media -->
      <k-checkbox component="div" name="my-checkbox" />
    </template>
  </k-list-item>
</List>
```

{% endtab %}
{% endtabs %}

### Examples

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

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

    <i-block-title>Inline</i-block-title>
    <i-block strong-ios outline-ios>
      <p>
        Lorem{{ ' ' }}
        <i-checkbox
          name="checkbox-1"
          :checked="checked1"
          @change="(e) => (checked1 = e.target.checked)"
        />{{ ' ' }} ipsum dolor sit amet, consectetur adipisicing elit. Alias
        beatae illo nihil aut eius commodi sint eveniet aliquid eligendi
        {{ ' ' }}
        <i-checkbox
          name="checkbox-2"
          :checked="checked2"
          @change="(e) => (checked2 = e.target.checked)"
        />{{ ' ' }}
        ad delectus impedit tempore nemo, enim vel praesentium consequatur nulla
        mollitia!
      </p>
    </i-block>

    <i-block-title>Checkbox Group</i-block-title>
    <i-list strong-ios outline-ios>
      <i-list-item label title="Books">
        <template #media>
          <i-checkbox
            component="div"
            name="demo-checkbox"
            :checked="group.includes('Books')"
            @change="() => toggleGroupValue('Books')"
          />
        </template>
      </i-list-item>
      <i-list-item label title="Movies">
        <template #media>
          <i-checkbox
            component="div"
            name="demo-checkbox"
            :checked="group.includes('Movies')"
            @change="() => toggleGroupValue('Movies')"
          />
        </template>
      </i-list-item>
      <i-list-item label title="Food">
        <template #media>
          <i-checkbox
            component="div"
            name="demo-checkbox"
            :checked="group.includes('Food')"
            @change="() => toggleGroupValue('Food')"
          />
        </template>
      </i-list-item>
      <i-list-item label title="Drinks">
        <template #media>
          <i-checkbox
            component="div"
            name="demo-checkbox"
            :checked="group.includes('Drinks')"
            @change="() => toggleGroupValue('Drinks')"
          />
        </template>
      </i-list-item>
    </i-list>

    <i-block-title>Indeterminate State</i-block-title>
    <i-list strong-ios outline-ios>
      <i-list-item label title="Movies" name="demo-checkbox">
        <template #media>
          <i-checkbox
            :checked="movies.length === 2"
            :indeterminate="movies.length === 1"
            @change="onMoviesChange"
          />
        </template>
        <ul class="ps-12">
          <i-list-item label title="Movie 1">
            <template #media>
              <i-checkbox
                name="demo-checkbox"
                value="Movie 1"
                :checked="movies.indexOf('Movie 1') >= 0"
                @change="onMovieChange"
              />
            </template>
          </i-list-item>
          <i-list-item label title="Movie 2">
            <template #media>
              <i-checkbox
                name="demo-checkbox"
                value="Movie 2"
                :checked="movies.indexOf('Movie 2') >= 0"
                @change="onMovieChange"
              />
            </template>
          </i-list-item>
        </ul>
      </i-list-item>
    </i-list>

    <i-block-title>With Media Lists</i-block-title>
    <i-list strong-ios outline-ios>
      <i-list-item
        label
        title="Facebook"
        after="17:14"
        subtitle="New messages from John Doe"
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
      >
        <template #media>
          <i-checkbox
            component="div"
            name="demo-media-checkbox"
            :checked="media.includes('Item 1')"
            @change="() => toggleMediaValue('Item 1')"
          />
        </template>
      </i-list-item>
      <i-list-item
        label
        title="John Doe (via Twitter)"
        after="17:11"
        subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
        text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
      >
        <template #media>
          <i-checkbox
            component="div"
            name="demo-media-checkbox"
            :checked="media.includes('Item 2')"
            @change="() => toggleMediaValue('Item 2')"
          />
        </template>
      </i-list-item>
    </i-list>
  </i-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iCheckbox,
    iBlockTitle,
    iBlock,
    iList,
    iListItem,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iCheckbox,
      iBlockTitle,
      iBlock,
      iList,
      iListItem,
    },

    setup() {
      const checked1 = ref(false);
      const checked2 = ref(true);

      // Group
      const group = ref(['Books']);
      const toggleGroupValue = (value) => {
        if (group.value.includes(value))
          group.value.splice(group.value.indexOf(value), 1);
        else group.value.push(value);
        group.value = [...group.value];
      };

      // Indeterminate
      const movies = ref(['Movie 1']);
      const onMovieChange = (e) => {
        const value = e.target.value;
        if (e.target.checked) {
          movies.value.push(value);
        } else {
          movies.value.splice(movies.value.indexOf(value), 1);
        }
        movies.value = [...movies.value];
      };
      const onMoviesChange = () => {
        if (movies.value.length === 1 || movies.value.length === 0) {
          movies.value = ['Movie 1', 'Movie 2'];
        } else if (movies.value.length === 2) {
          movies.value = [];
        }
      };

      // Media
      const media = ref(['Item 1']);
      const toggleMediaValue = (value) => {
        if (media.value.includes(value))
          media.value.splice(media.value.indexOf(value), 1);
        else media.value.push(value);
        media.value = [...media.value];
      };

      return {
        checked1,
        checked2,
        group,
        toggleGroupValue,
        movies,
        onMovieChange,
        onMoviesChange,
        media,
        toggleMediaValue,
      };
    },
  };
</script>
```

{% endtab %}

{% tab title="React" %}

```js
import React, { useState } from 'react';

import {
  Page,
  Navbar,
  NavbarBackLink,
  Checkbox,
  BlockTitle,
  Block,
  List,
  ListItem,
} from 'ina-ui/react';

export default function CheckboxPage() {
  const [checked1, setChecked1] = useState(false);
  const [checked2, setChecked2] = useState(true);

  // Group
  const [group, setGroup] = useState(['Books']);
  const toggleGroupValue = (value) => {
    if (group.includes(value)) group.splice(group.indexOf(value), 1);
    else group.push(value);
    setGroup([...group]);
  };

  // Indeterminate
  const [movies, setMovies] = useState(['Movie 1']);
  const onMovieChange = (e) => {
    const value = e.target.value;
    if (e.target.checked) {
      movies.push(value);
    } else {
      movies.splice(movies.indexOf(value), 1);
    }
    setMovies([...movies]);
  };
  const onMoviesChange = () => {
    if (movies.length === 1 || movies.length === 0) {
      setMovies(['Movie 1', 'Movie 2']);
    } else if (movies.length === 2) {
      setMovies([]);
    }
  };

  // Media
  const [media, setMedia] = useState(['Item 1']);
  const toggleMediaValue = (value) => {
    if (media.includes(value)) media.splice(media.indexOf(value), 1);
    else media.push(value);
    setMedia([...media]);
  };

  return (
    <Page>
      <Navbar
        title="Checkbox"
        />

      <BlockTitle>Inline</BlockTitle>
      <Block strongIos outlineIos>
        <p>
          Lorem{' '}
          <Checkbox
            name="checkbox-1"
            checked={checked1}
            onChange={(e) => setChecked1(e.target.checked)}
          />{' '}
          ipsum dolor sit amet, consectetur adipisicing elit. Alias beatae illo
          nihil aut eius commodi sint eveniet aliquid eligendi{' '}
          <Checkbox
            name="checkbox-2"
            checked={checked2}
            onChange={(e) => setChecked2(e.target.checked)}
          />{' '}
          ad delectus impedit tempore nemo, enim vel praesentium consequatur
          nulla mollitia!
        </p>
      </Block>

      <BlockTitle>Checkbox Group</BlockTitle>
      <List strongIos outlineIos>
        <ListItem
          label
          title="Books"
          media={
            <Checkbox
              component="div"
              name="demo-checkbox"
              checked={group.includes('Books')}
              onChange={() => toggleGroupValue('Books')}
            />
          }
        />
        <ListItem
          label
          title="Movies"
          media={
            <Checkbox
              component="div"
              name="demo-checkbox"
              checked={group.includes('Movies')}
              onChange={() => toggleGroupValue('Movies')}
            />
          }
        />
        <ListItem
          label
          title="Food"
          media={
            <Checkbox
              component="div"
              name="demo-checkbox"
              checked={group.includes('Food')}
              onChange={() => toggleGroupValue('Food')}
            />
          }
        />
        <ListItem
          label
          title="Drinks"
          media={
            <Checkbox
              component="div"
              name="demo-checkbox"
              checked={group.includes('Drinks')}
              onChange={() => toggleGroupValue('Drinks')}
            />
          }
        />
      </List>

      <BlockTitle>Indeterminate State</BlockTitle>
      <List strongIos outlineIos>
        <ListItem
          label
          title="Movies"
          name="demo-checkbox"
          media={
            <Checkbox
              checked={movies.length === 2}
              indeterminate={movies.length === 1}
              onChange={onMoviesChange}
            />
          }
        >
          <ul className="ps-12">
            <ListItem
              label
              title="Movie 1"
              media={
                <Checkbox
                  name="demo-checkbox"
                  value="Movie 1"
                  checked={movies.indexOf('Movie 1') >= 0}
                  onChange={onMovieChange}
                />
              }
            />
            <ListItem
              label
              title="Movie 2"
              media={
                <Checkbox
                  name="demo-checkbox"
                  value="Movie 2"
                  checked={movies.indexOf('Movie 2') >= 0}
                  onChange={onMovieChange}
                />
              }
            />
          </ul>
        </ListItem>
      </List>

      <BlockTitle>With Media Lists</BlockTitle>
      <List strongIos outlineIos>
        <ListItem
          label
          title="Facebook"
          after="17:14"
          subtitle="New messages from John Doe"
          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
          media={
            <Checkbox
              component="div"
              name="demo-media-checkbox"
              checked={media.includes('Item 1')}
              onChange={() => toggleMediaValue('Item 1')}
            />
          }
        />
        <ListItem
          label
          title="John Doe (via Twitter)"
          after="17:11"
          subtitle="John Doe (@_johndoe) mentioned you on Twitter!"
          text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sagittis tellus ut turpis condimentum, ut dignissim lacus tincidunt. Cras dolor metus, ultrices condimentum sodales sit amet, pharetra sodales eros. Phasellus vel felis tellus. Mauris rutrum ligula nec dapibus feugiat. In vel dui laoreet, commodo augue id, pulvinar lacus."
          media={
            <Checkbox
              component="div"
              name="demo-media-checkbox"
              checked={media.includes('Item 2')}
              onChange={() => toggleMediaValue('Item 2')}
            />
          }
        />
      </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/9.checkbox.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.