> 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/31.radio.md).

# Radio

### Radio Props <a href="#radio-props" id="radio-props"></a>

| Name                         | Type    | Default                                                                   | Description                                                                                     |
| ---------------------------- | ------- | ------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| checked                      | boolean | false                                                                     | Defines whether the radio 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 radio input is checked or not, for the case if it is uncontrolled component |
| disabled                     | boolean | false                                                                     | Defines whether the radio input is disabled                                                     |
| name                         | string  |                                                                           | Radio input name                                                                                |
| readonly                     | boolean | false                                                                     | Defines whether the radio input is readonly                                                     |
| touchRipple                  | boolean | true                                                                      | Enables touch ripple effect in Material theme                                                   |
| value                        | any     |                                                                           | Radio input value                                                                               |

### Radio Events

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

### Radios List

Radios List is not a separate component, but just a particular case of using [`List`](https://konstaui.com/vue/list) and [`ListItem`](https://konstaui.com/vue/list-item) components.

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

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

{% endtab %}

{% tab title="React" %}

```javascript
<List>
  {/* Additional "label" prop on ListItem */}
  <ListItem
    label
    title="Books"
    media={
      <>
        {/* Pass Radio to list item media */}
        <Radio component="div" name="my-checkbox" />
      </>
    }
  />
  <ListItem
    label
    title="Movies"
    media={
      <>
        {/* Pass Radio to list item media */}
        <Radio component="div" name="my-checkbox" />
      </>
    }
  />
</List>
```

{% endtab %}
{% endtabs %}

### Examples

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

```vue
<template>
  <i-page>
    <i-navbar title="Radio" />

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

    <i-block-title>Radio Group</i-block-title>
    <i-list strong-ios outline-ios>
      <i-list-item label title="Books">
        <template #media>
          <i-radio
            component="div"
            value="Books"
            :checked="groupValue === 'Books'"
            @change="() => (groupValue = 'Books')"
          />
        </template>
      </i-list-item>
      <i-list-item label title="Movies">
        <template #media>
          <i-radio
            component="div"
            value="Movies"
            :checked="groupValue === 'Movies'"
            @change="() => (groupValue = 'Movies')"
          />
        </template>
      </i-list-item>
      <i-list-item label title="Food">
        <template #media>
          <i-radio
            component="div"
            value="Food"
            :checked="groupValue === 'Food'"
            @change="() => (groupValue = 'Food')"
          />
        </template>
      </i-list-item>
      <i-list-item label title="Drinks">
        <template #media>
          <i-radio
            component="div"
            value="Drinks"
            :checked="groupValue === 'Drinks'"
            @change="() => (groupValue = 'Drinks')"
          />
        </template>
      </i-list-item>
    </i-list>

    <i-list strong-ios outline-ios>
      <i-list-item label title="Books">
        <template #after>
          <i-radio
            component="div"
            value="Books"
            :checked="groupValue === 'Books'"
            @change="() => (groupValue = 'Books')"
          />
        </template>
      </i-list-item>
      <i-list-item label title="Movies">
        <template #after>
          <i-radio
            component="div"
            value="Movies"
            :checked="groupValue === 'Movies'"
            @change="() => (groupValue = 'Movies')"
          />
        </template>
      </i-list-item>
      <i-list-item label title="Food">
        <template #after>
          <i-radio
            component="div"
            value="Food"
            :checked="groupValue === 'Food'"
            @change="() => (groupValue = 'Food')"
          />
        </template>
      </i-list-item>
      <i-list-item label title="Drinks">
        <template #after>
          <i-radio
            component="div"
            value="Drinks"
            :checked="groupValue === 'Drinks'"
            @change="() => (groupValue = 'Drinks')"
          />
        </template>
      </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-radio
            component="div"
            :checked="mediaValue === 'Item 1'"
            @change="() => (mediaValue = '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-radio
            component="div"
            :checked="mediaValue === 'Item 2'"
            @change="() => (mediaValue = 'Item 2')"
          />
        </template>
      </i-list-item>
    </i-list>
  </i-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    iPage,
    iNavbar,
    iNavbarBackLink,
    iRadio,
    iBlockTitle,
    iBlock,
    iList,
    iListItem,
  } from 'ina-ui/vue';

  export default {
    components: {
      iPage,
      iNavbar,
      iNavbarBackLink,
      iRadio,
      iBlockTitle,
      iBlock,
      iList,
      iListItem,
    },
    setup() {
      const inlineValue = ref('inline-1');
      const groupValue = ref('Books');
      const mediaValue = ref('Item 1');

      return {
        inlineValue,
        groupValue,
        mediaValue,
      };
    },
  };
</script>
```

{% endtab %}

{% tab title="React" %}

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

export default function RadioPage() {
  const [inlineValue, setInlineValue] = useState('inline-1');
  const [groupValue, setGroupValue] = useState('Books');
  const [mediaValue, setMediaValue] = useState('Item 1');

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

      <BlockTitle>Inline</BlockTitle>
      <Block strongIos outlineIos>
        <p>
          Lorem{' '}
          <Radio
            name="demo-radio-inline"
            value="inline-1"
            checked={inlineValue === 'inline-1'}
            onChange={() => setInlineValue('inline-1')}
          />{' '}
          ipsum dolor sit amet, consectetur adipisicing elit. Alias beatae illo
          nihil aut eius commodi sint eveniet aliquid eligendi{' '}
          <Radio
            name="demo-radio-inline"
            value="inline-2"
            checked={inlineValue === 'inline-2'}
            onChange={() => setInlineValue('inline-2')}
          />{' '}
          ad delectus impedit tempore nemo, enim vel praesentium consequatur
          nulla mollitia!
        </p>
      </Block>

      <BlockTitle>Radio Group</BlockTitle>
      <List strongIos outlineIos>
        <ListItem
          label
          title="Books"
          media={
            <Radio
              component="div"
              value="Books"
              checked={groupValue === 'Books'}
              onChange={() => setGroupValue('Books')}
            />
          }
        />
        <ListItem
          label
          title="Movies"
          media={
            <Radio
              component="div"
              value="Movies"
              checked={groupValue === 'Movies'}
              onChange={() => setGroupValue('Movies')}
            />
          }
        />
        <ListItem
          label
          title="Food"
          media={
            <Radio
              component="div"
              value="Food"
              checked={groupValue === 'Food'}
              onChange={() => setGroupValue('Food')}
            />
          }
        />
        <ListItem
          label
          title="Drinks"
          media={
            <Radio
              component="div"
              value="Drinks"
              checked={groupValue === 'Drinks'}
              onChange={() => setGroupValue('Drinks')}
            />
          }
        />
      </List>

      <List strongIos outlineIos>
        <ListItem
          label
          title="Books"
          after={
            <Radio
              component="div"
              value="Books"
              checked={groupValue === 'Books'}
              onChange={() => setGroupValue('Books')}
            />
          }
        />
        <ListItem
          label
          title="Movies"
          after={
            <Radio
              component="div"
              value="Movies"
              checked={groupValue === 'Movies'}
              onChange={() => setGroupValue('Movies')}
            />
          }
        />
        <ListItem
          label
          title="Food"
          after={
            <Radio
              component="div"
              value="Food"
              checked={groupValue === 'Food'}
              onChange={() => setGroupValue('Food')}
            />
          }
        />
        <ListItem
          label
          title="Drinks"
          after={
            <Radio
              component="div"
              value="Drinks"
              checked={groupValue === 'Drinks'}
              onChange={() => setGroupValue('Drinks')}
            />
          }
        />
      </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={
            <Radio
              component="div"
              checked={mediaValue === 'Item 1'}
              onChange={() => setMediaValue('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={
            <Radio
              component="div"
              checked={mediaValue === 'Item 2'}
              onChange={() => setMediaValue('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/31.radio.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.