Radio Vue Component

Radio Components
Radio Props
Radio Events
Radios List
Examples

Radio Components

There are following components included:

Radio

Radio Props

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.bgChecked	string	'bg-primary'	Radio bg color when it is checked
colors.borderChecked	string	'border-primary'	Radio border color when it is checked
colors.borderIos	string	'border-black border-opacity-30 dark:border-white dark:border-opacity-30'	Radio border color in iOS theme
colors.borderMaterial	string	'border-black border-opacity-40 dark:border-white dark:border-opacity-40'	Radio border color in Material theme
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
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 and ListItem components.

<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>

Examples

Radio.vue

<template>
  <k-page>
    <k-navbar title="Radio" />

    <k-block-title>Inline</k-block-title>
    <k-block strong>
      <p>
        Lorem{{ ' ' }}
        <k-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{{
          ' '
        }}
        <k-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>
    </k-block>

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

    <k-list>
      <k-list-item label title="Books">
        <template #after>
          <k-radio
            component="div"
            value="Books"
            :checked="groupValue === 'Books'"
            @change="() => (groupValue = 'Books')"
          />
        </template>
      </k-list-item>
      <k-list-item label title="Movies">
        <template #after>
          <k-radio
            component="div"
            value="Movies"
            :checked="groupValue === 'Movies'"
            @change="() => (groupValue = 'Movies')"
          />
        </template>
      </k-list-item>
      <k-list-item label title="Food">
        <template #after>
          <k-radio
            component="div"
            value="Food"
            :checked="groupValue === 'Food'"
            @change="() => (groupValue = 'Food')"
          />
        </template>
      </k-list-item>
      <k-list-item label title="Drinks">
        <template #after>
          <k-radio
            component="div"
            value="Drinks"
            :checked="groupValue === 'Drinks'"
            @change="() => (groupValue = 'Drinks')"
          />
        </template>
      </k-list-item>
    </k-list>

    <k-block-title>With Media Lists</k-block-title>
    <k-list>
      <k-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>
          <k-radio
            component="div"
            :checked="mediaValue === 'Item 1'"
            @change="() => (mediaValue = 'Item 1')"
          />
        </template>
      </k-list-item>
      <k-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>
          <k-radio
            component="div"
            :checked="mediaValue === 'Item 2'"
            @change="() => (mediaValue = 'Item 2')"
          />
        </template>
      </k-list-item>
    </k-list>
  </k-page>
</template>
<script>
  import { ref } from 'vue';
  import {
    kPage,
    kNavbar,
    kNavbarBackLink,
    kRadio,
    kBlockTitle,
    kBlock,
    kList,
    kListItem,
  } from 'konsta/vue';

  export default {
    components: {
      kPage,
      kNavbar,
      kNavbarBackLink,
      kRadio,
      kBlockTitle,
      kBlock,
      kList,
      kListItem,
    },
    setup() {
      const inlineValue = ref('inline-1');
      const groupValue = ref('Books');
      const mediaValue = ref('Item 1');

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