Vinicunca

CheckboxGroup

CheckboxGroupGitHub
A set of checkboxes to select multiple options from a list.

Usage

Use the v-model directive to control the value of the CheckboxGroup or the default-value prop to set the initial value when you do not need to control its state.

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
const value = ref(['System'])
</script>

<template>
  <PCheckboxGroup v-model="value" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['System', 'Light', 'Dark'])
const value = ref(['System'])
</script>

<template>
  <PCheckboxGroup v-model="value" :items="items" />
</template>

Items

Use the items prop as an array of strings or numbers:

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
const value = ref(['System'])
</script>

<template>
  <PCheckboxGroup v-model="value" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['System', 'Light', 'Dark'])
const value = ref(['System'])
</script>

<template>
  <PCheckboxGroup v-model="value" :items="items" />
</template>

You can also pass an array of objects with the following properties:

  • label?: string
  • description?: string
  • value?: string
  • disabled?: boolean
  • icon?: string
  • class?: any
  • ui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, icon?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, description?: ClassNameValue }

Matches your device settings.

Always uses the light theme.

Always uses the dark theme.

<script setup lang="ts">
import type { CheckboxGroupItem } from 'pohon-ui'

const items = ref<CheckboxGroupItem[]>([
  {
    label: 'System',
    description: 'Matches your device settings.',
    value: 'system'
  },
  {
    label: 'Light',
    description: 'Always uses the light theme.',
    value: 'light'
  },
  {
    label: 'Dark',
    description: 'Always uses the dark theme.',
    value: 'dark'
  }
])
const value = ref([
  'system'
])
</script>

<template>
  <PCheckboxGroup v-model="value" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { CheckboxGroupItem } from 'pohon-ui'

const items = ref<CheckboxGroupItem[]>([
  {
    label: 'System',
    description: 'Matches your device settings.',
    value: 'system'
  },
  {
    label: 'Light',
    description: 'Always uses the light theme.',
    value: 'light'
  },
  {
    label: 'Dark',
    description: 'Always uses the dark theme.',
    value: 'dark'
  }
])
const value = ref([
  'system'
])
</script>

<template>
  <PCheckboxGroup v-model="value" :items="items" />
</template>
When using objects, you need to reference the value property of the object in the v-model directive or the default-value prop.

Value Key

You can change the property that is used to set the value by using the value-key prop. Defaults to value.

Matches your device settings.

Always uses the light theme.

Always uses the dark theme.

<script setup lang="ts">
import type { CheckboxGroupItem } from 'pohon-ui'

const items = ref<CheckboxGroupItem[]>([
  {
    label: 'System',
    description: 'Matches your device settings.',
    id: 'system'
  },
  {
    label: 'Light',
    description: 'Always uses the light theme.',
    id: 'light'
  },
  {
    label: 'Dark',
    description: 'Always uses the dark theme.',
    id: 'dark'
  }
])
const value = ref([
  'light'
])
</script>

<template>
  <PCheckboxGroup v-model="value" value-key="id" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { CheckboxGroupItem } from 'pohon-ui'

const items = ref<CheckboxGroupItem[]>([
  {
    label: 'System',
    description: 'Matches your device settings.',
    id: 'system'
  },
  {
    label: 'Light',
    description: 'Always uses the light theme.',
    id: 'light'
  },
  {
    label: 'Dark',
    description: 'Always uses the dark theme.',
    id: 'dark'
  }
])
const value = ref([
  'light'
])
</script>

<template>
  <PCheckboxGroup v-model="value" value-key="id" :items="items" />
</template>

Legend

Use the legend prop to set the legend of the CheckboxGroup.

Theme
<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <PCheckboxGroup legend="Theme" :default-value="['System']" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <PCheckboxGroup legend="Theme" :default-value="['System']" :items="items" />
</template>

Color

Use the color prop to change the color of the CheckboxGroup.

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <PCheckboxGroup color="neutral" :default-value="['System']" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <PCheckboxGroup color="neutral" :default-value="['System']" :items="items" />
</template>

Variant

Use the variant prop to change the variant of the CheckboxGroup.

<script setup lang="ts">
import type { CheckboxGroupItem } from 'pohon-ui'

const items = ref<CheckboxGroupItem[]>([
  {
    label: 'System',
    value: 'system',
    description: 'Matches your device settings.'
  },
  {
    label: 'Light',
    value: 'light',
    description: 'Always uses the light theme.'
  },
  {
    label: 'Dark',
    value: 'dark',
    description: 'Always uses the dark theme.'
  }
])
</script>

<template>
  <PCheckboxGroup color="primary" variant="card" :default-value="['system']" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { CheckboxGroupItem } from 'pohon-ui'

const items = ref<CheckboxGroupItem[]>([
  {
    label: 'System',
    value: 'system',
    description: 'Matches your device settings.'
  },
  {
    label: 'Light',
    value: 'light',
    description: 'Always uses the light theme.'
  },
  {
    label: 'Dark',
    value: 'dark',
    description: 'Always uses the dark theme.'
  }
])
</script>

<template>
  <PCheckboxGroup color="primary" variant="card" :default-value="['system']" :items="items" />
</template>

Size

Use the size prop to change the size of the CheckboxGroup.

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <PCheckboxGroup size="xl" variant="list" :default-value="['System']" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <PCheckboxGroup size="xl" variant="list" :default-value="['System']" :items="items" />
</template>

Orientation

Use the orientation prop to change the orientation of the CheckboxGroup. Defaults to vertical.

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <PCheckboxGroup
    orientation="horizontal"
    variant="list"
    :default-value="['System']"
    :items="items"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <PCheckboxGroup
    orientation="horizontal"
    variant="list"
    :default-value="['System']"
    :items="items"
  />
</template>

Indicator

Use the indicator prop to change the position or hide the indicator. Defaults to start.

An item's icon replaces the check mark while the indicator is visible, and is displayed above the label when it is hidden.
<script setup lang="ts">
import type { CheckboxGroupItem } from 'pohon-ui'

const items = ref<CheckboxGroupItem[]>([
  {
    label: 'System',
    icon: 'i-lucide-monitor',
    value: 'System',
    class: 'w-20'
  },
  {
    label: 'Light',
    icon: 'i-lucide-sun',
    class: 'w-20',
    value: 'Light'
  },
  {
    label: 'Dark',
    icon: 'i-lucide-moon',
    class: 'w-20',
    value: 'Dark'
  }
])
</script>

<template>
  <PCheckboxGroup
    indicator="hidden"
    orientation="horizontal"
    variant="table"
    :default-value="['System']"
    :items="items"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { CheckboxGroupItem } from 'pohon-ui'

const items = ref<CheckboxGroupItem[]>([
  {
    label: 'System',
    icon: 'i-lucide-monitor',
    value: 'System',
    class: 'w-20'
  },
  {
    label: 'Light',
    icon: 'i-lucide-sun',
    class: 'w-20',
    value: 'Light'
  },
  {
    label: 'Dark',
    icon: 'i-lucide-moon',
    class: 'w-20',
    value: 'Dark'
  }
])
</script>

<template>
  <PCheckboxGroup
    indicator="hidden"
    orientation="horizontal"
    variant="table"
    :default-value="['System']"
    :items="items"
  />
</template>

Disabled

Use the disabled prop to disable the CheckboxGroup.

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <PCheckboxGroup disabled :default-value="['System']" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <PCheckboxGroup disabled :default-value="['System']" :items="items" />
</template>

Max

Use the max prop to limit the number of items that can be checked. Once the limit is reached, the unchecked items can't be checked anymore.

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <PCheckboxGroup :max="2" :default-value="['System', 'Light']" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <PCheckboxGroup :max="2" :default-value="['System', 'Light']" :items="items" />
</template>

API

Props

Prop Default Type

Slots

Slot Type

Emits

Event Type

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    checkboxGroup: {
      slots: {
        root: 'relative',
        fieldset: 'flex gap-x-2',
        legend: 'mb-1 block font-500 color-text',
        item: ''
      },
      variants: {
        orientation: {
          horizontal: {
            fieldset: 'flex-row'
          },
          vertical: {
            fieldset: 'flex-col'
          }
        },
        color: {
          primary: {},
          secondary: {},
          success: {},
          info: {},
          warning: {},
          error: {},
          neutral: {}
        },
        variant: {
          list: {
            fieldset: 'flex-wrap'
          },
          card: {
            fieldset: 'flex-wrap'
          },
          table: {
            item: [
              'border border-border has-aria-disabled:cursor-not-allowed hover:[&:not(:has(:disabled,[aria-disabled=true],:focus-visible,[data-state=checked]))]:bg-background-elevated/50',
              'transition-colors'
            ]
          }
        },
        size: {
          xs: {
            fieldset: 'gap-y-0.5',
            legend: 'text-xs'
          },
          sm: {
            fieldset: 'gap-y-0.5',
            legend: 'text-xs'
          },
          md: {
            fieldset: 'gap-y-1',
            legend: 'text-sm'
          },
          lg: {
            fieldset: 'gap-y-1',
            legend: 'text-sm'
          },
          xl: {
            fieldset: 'gap-y-1.5',
            legend: 'text-base'
          }
        },
        required: {
          true: {
            legend: "after:color-error after:ms-0.5 after:content-['*']"
          }
        },
        highlight: {
          true: {},
          false: {}
        },
        disabled: {
          true: {}
        }
      },
      compoundVariants: [
        {
          color: 'primary',
          variant: 'table',
          class: {
            item: 'outline-primary/25 has-focus-visible:outline-3 has-focus-visible:[&:not(:has(:disabled,[aria-disabled=true]))]:border-primary has-focus-visible:z-1'
          }
        },
        {
          color: 'neutral',
          variant: 'table',
          class: {
            item: 'outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:[&:not(:has(:disabled,[aria-disabled=true]))]:border-inverted has-focus-visible:z-1'
          }
        },
        {
          variant: 'table',
          highlight: false,
          class: {
            item: 'hover:[&:not(:has(:disabled,[aria-disabled=true],:focus-visible,[data-state=checked]))]:border-border-accented hover:[&:not(:has(:disabled,[aria-disabled=true],:focus-visible,[data-state=checked]))]:z-1'
          }
        },
        {
          size: 'xs',
          variant: 'table',
          class: {
            item: 'p-2.5'
          }
        },
        {
          size: 'sm',
          variant: 'table',
          class: {
            item: 'p-3'
          }
        },
        {
          size: 'md',
          variant: 'table',
          class: {
            item: 'p-3.5'
          }
        },
        {
          size: 'lg',
          variant: 'table',
          class: {
            item: 'p-4'
          }
        },
        {
          size: 'xl',
          variant: 'table',
          class: {
            item: 'p-4.5'
          }
        },
        {
          orientation: 'horizontal',
          variant: 'table',
          class: {
            item: 'first-of-type:rounded-s-lg last-of-type:rounded-e-lg',
            fieldset: 'pohon:gap-0 -space-x-px'
          }
        },
        {
          orientation: 'vertical',
          variant: 'table',
          class: {
            item: 'first-of-type:rounded-t-lg last-of-type:rounded-b-lg',
            fieldset: 'pohon:gap-0 -space-y-px'
          }
        },
        {
          color: 'primary',
          variant: 'table',
          class: {
            item: 'has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-2'
          }
        },
        {
          color: 'neutral',
          variant: 'table',
          class: {
            item: 'has-data-[state=checked]:bg-background-elevated has-data-[state=checked]:border-border-inverted/50 has-data-[state=checked]:z-2'
          }
        },
        {
          variant: 'table',
          disabled: true,
          class: {
            item: 'cursor-not-allowed'
          }
        }
      ],
      defaultVariants: {
        highlight: false,
        size: 'md',
        variant: 'list',
        color: 'primary'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from 'pohon-ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        checkboxGroup: {
          slots: {
            root: 'relative',
            fieldset: 'flex gap-x-2',
            legend: 'mb-1 block font-500 color-text',
            item: ''
          },
          variants: {
            orientation: {
              horizontal: {
                fieldset: 'flex-row'
              },
              vertical: {
                fieldset: 'flex-col'
              }
            },
            color: {
              primary: {},
              secondary: {},
              success: {},
              info: {},
              warning: {},
              error: {},
              neutral: {}
            },
            variant: {
              list: {
                fieldset: 'flex-wrap'
              },
              card: {
                fieldset: 'flex-wrap'
              },
              table: {
                item: [
                  'border border-border has-aria-disabled:cursor-not-allowed hover:[&:not(:has(:disabled,[aria-disabled=true],:focus-visible,[data-state=checked]))]:bg-background-elevated/50',
                  'transition-colors'
                ]
              }
            },
            size: {
              xs: {
                fieldset: 'gap-y-0.5',
                legend: 'text-xs'
              },
              sm: {
                fieldset: 'gap-y-0.5',
                legend: 'text-xs'
              },
              md: {
                fieldset: 'gap-y-1',
                legend: 'text-sm'
              },
              lg: {
                fieldset: 'gap-y-1',
                legend: 'text-sm'
              },
              xl: {
                fieldset: 'gap-y-1.5',
                legend: 'text-base'
              }
            },
            required: {
              true: {
                legend: "after:color-error after:ms-0.5 after:content-['*']"
              }
            },
            highlight: {
              true: {},
              false: {}
            },
            disabled: {
              true: {}
            }
          },
          compoundVariants: [
            {
              color: 'primary',
              variant: 'table',
              class: {
                item: 'outline-primary/25 has-focus-visible:outline-3 has-focus-visible:[&:not(:has(:disabled,[aria-disabled=true]))]:border-primary has-focus-visible:z-1'
              }
            },
            {
              color: 'neutral',
              variant: 'table',
              class: {
                item: 'outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:[&:not(:has(:disabled,[aria-disabled=true]))]:border-inverted has-focus-visible:z-1'
              }
            },
            {
              variant: 'table',
              highlight: false,
              class: {
                item: 'hover:[&:not(:has(:disabled,[aria-disabled=true],:focus-visible,[data-state=checked]))]:border-border-accented hover:[&:not(:has(:disabled,[aria-disabled=true],:focus-visible,[data-state=checked]))]:z-1'
              }
            },
            {
              size: 'xs',
              variant: 'table',
              class: {
                item: 'p-2.5'
              }
            },
            {
              size: 'sm',
              variant: 'table',
              class: {
                item: 'p-3'
              }
            },
            {
              size: 'md',
              variant: 'table',
              class: {
                item: 'p-3.5'
              }
            },
            {
              size: 'lg',
              variant: 'table',
              class: {
                item: 'p-4'
              }
            },
            {
              size: 'xl',
              variant: 'table',
              class: {
                item: 'p-4.5'
              }
            },
            {
              orientation: 'horizontal',
              variant: 'table',
              class: {
                item: 'first-of-type:rounded-s-lg last-of-type:rounded-e-lg',
                fieldset: 'pohon:gap-0 -space-x-px'
              }
            },
            {
              orientation: 'vertical',
              variant: 'table',
              class: {
                item: 'first-of-type:rounded-t-lg last-of-type:rounded-b-lg',
                fieldset: 'pohon:gap-0 -space-y-px'
              }
            },
            {
              color: 'primary',
              variant: 'table',
              class: {
                item: 'has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-2'
              }
            },
            {
              color: 'neutral',
              variant: 'table',
              class: {
                item: 'has-data-[state=checked]:bg-background-elevated has-data-[state=checked]:border-border-inverted/50 has-data-[state=checked]:z-2'
              }
            },
            {
              variant: 'table',
              disabled: true,
              class: {
                item: 'cursor-not-allowed'
              }
            }
          ],
          defaultVariants: {
            highlight: false,
            size: 'md',
            variant: 'list',
            color: 'primary'
          }
        }
      }
    })
  ]
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

Changelog

No recent changes

Checkbox

An input element to toggle between checked and unchecked states.

ColorPicker

A component to select a color.