Radio Group

Display a group of radio cards.

Usage

Radio Groups is effectively a HTML radio list, with a card based selector interface. It uses HeadlessUI's Radio Group components. Our wrapped components areCRadioGroup and CRadioCard.

<script lang="ts" setup>
const selected = ref('val-1')
const cards = ref([
  { value: 'val-1', content: 'example 1' },
  { value: 'val-2', content: 'example 2' },
  { value: 'val-3', content: 'example 3' },
  { value: 'val-4', content: 'example 4' },
])
</script>

<template>
  <CRadioGroup v-model="selected">
    <CRadioCard
      v-for="(card, index) in cards"
      :key="index"
      :value="card.value"
    >
      {{ card.content }}
    </CRadioCard>
  </CRadioGroup>
</template>

Row

Radio group can also be styled as a row.

<script lang="ts" setup>
const selected = ref('val-1')
const cards = ref([
  { value: 'val-1', content: 'example 1' },
  { value: 'val-2', content: 'example 2' },
  { value: 'val-3', content: 'example 3' },
  { value: 'val-4', content: 'example 4' },
])
</script>

<template>
  <CRadioGroup
    v-model="selected"
    direction="row"
  >
    <CRadioCard
      v-for="(card, index) in cards"
      :key="index"
      :value="card.value"
    >
      {{ card.content }}
    </CRadioCard>
  </CRadioGroup>
</template>

By

You can use the by prop to compare the objects by a particular field instead of comparing object identity. See the HeadlessUI docs for more information.

<script lang="ts" setup>
const cards = ref([
  { value: 'val-1', content: 'example 1' },
  { value: 'val-2', content: 'example 2' },
  { value: 'val-3', content: 'example 3' },
  { value: 'val-4', content: 'example 4' },
])
const selected = ref(cards.value[2])
</script>

<template>
  <CRadioGroup
    v-model="selected"
    by="content"
  >
    <CRadioCard
      v-for="(card, index) in cards"
      :key="index"
      :value="card"
    >
      {{ card.content }}
    </CRadioCard>
  </CRadioGroup>
</template>

Props

RadioGroup

modelValuerequired
any
direction
"col" | "row"
"col"
by
string

RadioCard

valuerequired
any
disabled
boolean