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 RekaUI's Radio Group components. Our wrapped components areCRadioGroup and CRadioCard.

example 1

example 2

example 3

example 4

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

example 1

example 2

example 3

example 4

      <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 RekaUI docs for more information.

example 1

example 2

example 3

example 4

      <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

Prop	Default	Type
`modelValue`		`any`
`direction`	`'col'`	`"col" \| "row"`
`by`		`string`

RadioCard

Prop	Default	Type
`value`		`any`
`disabled`		`boolean`
`variant`	`'subtle'`	`"outlined" \| "subtle"`