Radio

The radio component is a form control that allows the user to select a single option from a set of options.

With UnoCSS

Usage

Basic

<label class="radio" for="foo">
  <input
    class="peer" /* Required for UnoCSS */
    type="radio"
    id="foo"
    value="foo"
    name="name"
  >
  <span class="radio-dot" />
</label>

Colors

Use the radio-<color> class to change the color of the radio.

<!-- radio-theme-400 radio-purple radio-green dark:radio-red -->
<label radio="~ theme-400" for="foo">
  <input
    class="peer" /* Required for UnoCSS */
    type="radio"
    id="foo"
    value="foo"
    name="name"
  >
  <span class="radio-dot" />
</label>

Sizes

Use the radio-<size> class to change the size of the radio.

<label radio="~ sm" for="foo">
  <input
    class="peer" /* Required for UnoCSS */
    type="radio"
    id="foo"
    value="foo"
    name="name"
  >
  <span class="radio-dot" />
</label>

Disabled

<label radio="~ theme-400" for="foo">
  <input
    class="peer"
    type="radio"
    id="foo"
    value="foo"
    name="name"
    disabled
  >
  <span class="radio-dot" />
</label>

Shape

Provide circle or square to change the shape of the radio. And default is circle.

<label radio="~ theme-400 square" for="foo">
  <input
    class="peer"
    type="radio"
    id="foo"
    value="foo"
    name="name"
  >
  <span class="radio-dot" />
</label>

With Vue

Provide ORadio and ORadioGroup components to use radio in Vue.

Usage

Basic

<script setup lang='ts'>
const options = [
  { value: 'option1', label: 'Option 1' },
  { value: 'option2', label: 'Option 2' },
  { value: 100, label: 'Option 3' },
]
const status = ref('option1')
</script>

<Template>
  <ORadioGroup 
    v-model="status"
    :options="options"
    name="xxx"
  />
</Template>