Radio

Stable

Radio button is a form control for making a single selection from a short list of options.

<script setup lang="ts">
import { HRadio, HRadioGroup } from '@holistics/design-system'
import { ref } from 'vue'

const model = ref('Option 1')

const values = ['Option 1', 'Option 2', 'Option 3', 'Option 4']

</script>

<template>
  <div class="w-32">
    <div>Result: {{ model }}</div>
    <HRadioGroup
      v-model="model"
    >
      <HRadio
        v-for="value in values"
        :key="value"
        :value="value"
      >
        {{ value }}
      </HRadio>
    </HRadioGroup>
  </div>
</template>

A radio button may not be used on its own: it must be rendered in a group of related radio buttons using a Radio Group. Radio buttons cannot be unchecked, so only use radio buttons when a selection is required.

The Radio component supports the Roving Focus by default.

Examples

Mixed disabled state

This example will disable individual option, but you can disable the entire group by setting the disabled prop on the Radio Group.

<script setup lang="ts">
import { HRadio, HRadioGroup } from '@holistics/design-system'
import { ref } from 'vue'

const model = ref('Option 1')

const values = ['Option 1', 'Option 2', 'Option 3', 'Option 4']

</script>

<template>
  <div class="w-32">
    <div>Result: {{ model }}</div>
    <HRadioGroup
      v-model="model"
    >
      <HRadio
        v-for="value in values"
        :key="value"
        :value="value"
        :disabled="value === 'Option 2'"
      >
        {{ value }}
      </HRadio>
    </HRadioGroup>
  </div>
</template>

HRadioGroup API

Pass-through: <div>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
orientation	"vertical" | "horizontal" = "vertical"
disabled	boolean = false
name	string
required	boolean = false
modelValue	unknown

Events

Name	Parameters	Description
@update:modelValue	[value: unknown]

Slots

Name	Scoped	Description
#default	{}