Checkout group

Renders an accessible checkout group element.

Examples

Basic checkout group

Red

Green

Blue

Code

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

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

Checkout group with a help message

Red

This is a help message

Green

This is a help message

Blue

This is a help message

Code

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

const value = ref([])
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>
  <CheckboxGroup v-model="value" :options="options" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { CheckboxGroup } from '@/components/ui/checkbox-group'

const value = ref([])
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>
  <CheckboxGroup v-model="value" :options="options" horizontal />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { CheckboxGroup } from '@/components/ui/checkbox-group'

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