Radio Cards

Set of interactive cards where only one can be selected at a time.
alphaView sourceRadix Themes
vue
<script setup lang="ts">
import { ref } from 'vue'
import { RadioCardsRoot, RadioCardsItem } from '@typlog/ui'

const selected = ref<string>('1')
</script>

<template>
  <div class="max-w-[600px] text-sm">
    <RadioCardsRoot v-model="selected" class="flex items-center gap-2">
      <RadioCardsItem value="1">
        <div class="flex flex-col">
          <div class="font-bold">8-core CPU</div>
          <p>32GB RAM</p>
        </div>
      </RadioCardsItem>
      <RadioCardsItem value="2">
        <div class="flex flex-col">
          <div class="font-bold">6-core CPU</div>
          <p>24GB RAM</p>
        </div>
      </RadioCardsItem>
      <RadioCardsItem value="3">
        <div class="flex flex-col">
          <div class="font-bold">4-core CPU</div>
          <p>16GB RAM</p>
        </div>
      </RadioCardsItem>
    </RadioCardsRoot>
  </div>
</template>

API Reference ​

RadioCardsRoot ​

PropDefaultType
color
–
Color

Overrides the accent color inherited from the ThemeProvider.

highContrast
–
boolean

Uses a higher contrast color for the component.

size"2"
"1""2""3"

Control the size of the radio group.

variant"surface"
"surface""classic"

The visual variant of the radio group.

RadioCardsItem ​