Checkout group

Renders an accessible checkout group element.

Examples

Basic checkout group

Red

Green

Blue

Code

<template>
  <RadioGroup v-model="value" :options="options" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { RadioGroup } from '@/components/ui/radio-group'

const value = ref(null)
const options = [
  {
    label: 'Red',
    value: 'red'
  },
  {
    label: 'Green',
    value: 'green'
  },
  {
    label: 'Blue',
    value: 'blue'
  }
]
</script>

Disabled

Red

This is a help message

Green

This is a help message

Blue

This is a help message

Code

<template>
  <RadioGroup v-model="value" :options="options" disabled />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { RadioGroup } from '@/components/ui/radio-group'

const value = ref(null)
const options = [
  {
    label: 'Red',
    value: 'red',
    help: 'This is a help message'
  },
  {
    label: 'Green',
    value: 'green',
    help: 'This is a help message'
  },
  {
    label: 'Blue',
    value: 'blue',
    help: 'This is a help message'
  }
]
</script>

Disabled item

Red

This is a help message

Green

This is a help message

Blue

This is a help message

Code

<template>
  <RadioGroup v-model="value" :options="options" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { RadioGroup } from '@/components/ui/radio-group'

const value = ref(null)
const options = [
  {
    label: 'Red',
    value: 'red',
    help: 'This is a help message'
  },
  {
    label: 'Green',
    value: 'green',
    help: 'This is a help message',
    disabled: true
  },
  {
    label: 'Blue',
    value: 'blue',
    help: 'This is a help message'
  }
]
</script>

Horizontal checkout group

Red

Green

Blue

Code

<template>
  <RadioGroup v-model="value" :options="options" orientation="horizontal" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { RadioGroup } from '@/components/ui/radio-group'

const value = ref(null)
const options = [
  {
    label: 'Red',
    value: 'red'
  },
  {
    label: 'Green',
    value: 'green'
  },
  {
    label: 'Blue',
    value: 'blue'
  }
]
</script>