RTL Support: Full

Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Try in Cursor

Checkbox Group

Manages a set of related Checkboxes as one control — it collects each child's value into an array bound with v-model:value, and applies a shared size and disabled state to all of them. Lay the checkboxes out with HLSpace (horizontal or vertical).

Basic Usage

Wrap HLCheckboxes in HLCheckboxGroup and bind the selected array with v-model:value. Each child's value is what gets collected.

 

Option 1

 

Option 2

 

Option 3

<template>
  <HLCheckboxGroup id="example-group" v-model:value="value">
    <HLSpace>
      <HLCheckbox id="option1" value="option1">Option 1</HLCheckbox>
      <HLCheckbox id="option2" value="option2">Option 2</HLCheckbox>
      <HLCheckbox id="option3" value="option3">Option 3</HLCheckbox>
    </HLSpace>
  </HLCheckboxGroup>
</template>

<script setup lang="ts">
  import { HLCheckboxGroup, HLCheckbox, HLSpace } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const value = ref(['option1'])
</script>

Different Sizes

Set size on the group to apply one size (lg–3xs) to every checkbox inside it.

Large (lg):

 

Option 1

 

Option 2

 

Option 3

---

Medium (md):

 

Option 1

 

Option 2

 

Option 3

---

Small (sm):

 

Option 1

 

Option 2

 

Option 3

---

Extra Small (xs):

 

Option 1

 

Option 2

 

Option 3

---

2x Small (2xs):

 

Option 1

 

Option 2

 

Option 3

---

3x Small (3xs):

 

Option 1

 

Option 2

 

Option 3

<template>
  <HLCheckboxGroup id="example-group" v-model:value="value" size="lg">
    <HLSpace>
      <HLCheckbox id="option1" value="option1">Option 1</HLCheckbox>
      <HLCheckbox id="option2" value="option2">Option 2</HLCheckbox>
      <HLCheckbox id="option3" value="option3">Option 3</HLCheckbox>
    </HLSpace>
  </HLCheckboxGroup>
</template>

<script setup lang="ts">
  import { HLCheckboxGroup, HLCheckbox, HLSpace } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const value = ref(['option1'])
</script>

Vertical Layout

Wrap the checkboxes in <HLSpace vertical> to stack them in a column.

Large (lg):

 

Option 1

 

Option 2

 

Option 3

Medium (md):

 

Option 1

 

Option 2

 

Option 3

Small (sm):

 

Option 1

 

Option 2

 

Option 3

Extra Small (xs):

 

Option 1

 

Option 2

 

Option 3

2x Small (2xs):

 

Option 1

 

Option 2

 

Option 3

3x Small (3xs):

 

Option 1

 

Option 2

 

Option 3

<template>
  <HLCheckboxGroup id="vertical-group" v-model:value="value">
    <HLSpace vertical>
      <HLCheckbox id="option1" value="option1">Option 1</HLCheckbox>
      <HLCheckbox id="option2" value="option2">Option 2</HLCheckbox>
      <HLCheckbox id="option3" value="option3">Option 3</HLCheckbox>
    </HLSpace>
  </HLCheckboxGroup>
</template>

<script setup lang="ts">
  import { HLCheckboxGroup, HLCheckbox, HLSpace } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const value = ref(['option1'])
</script>

Disabled States

Set disabled on the group to disable all of its checkboxes at once.

 

Option 1

 

Option 2

 

Option 3

<template>
  <HLCheckboxGroup id="disabled-group" v-model:value="value" disabled>
    <HLSpace>
      <HLCheckbox id="option1" value="option1">Option 1</HLCheckbox>
      <HLCheckbox id="option2" value="option2">Option 2</HLCheckbox>
      <HLCheckbox id="option3" value="option3">Option 3</HLCheckbox>
    </HLSpace>
  </HLCheckboxGroup>
</template>

<script setup lang="ts">
  import { HLCheckboxGroup, HLCheckbox, HLSpace } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const value = ref(['option1'])
</script>

Error States

The checkbox group can be used within HLFormItem for form validation. The validation status will be automatically applied to all checkboxes in the group.

 

Option 1

 

Option 2

 

Option 3

Please select at least one option

<template>
  <HLFormItem validation-status="error" feedback="Please select at least one option">
    <HLCheckboxGroup id="error-group" v-model:value="value">
      <HLSpace>
        <HLCheckbox id="option1" value="option1">Option 1</HLCheckbox>
        <HLCheckbox id="option2" value="option2">Option 2</HLCheckbox>
        <HLCheckbox id="option3" value="option3">Option 3</HLCheckbox>
      </HLSpace>
    </HLCheckboxGroup>
  </HLFormItem>
</template>

<script setup lang="ts">
  import { HLFormItem, HLCheckboxGroup, HLCheckbox, HLSpace } from '@platform-ui/highrise'
  import { ref } from 'vue'

  const value = ref(['option1'])
</script>

Accessibility

• Add role="group" plus aria-label / aria-labelledby describing the question.
• Point aria-describedby to shared guidance or error text, and toggle aria-invalid on the group when validation fails.
• Ensure each child checkbox still exposes its own id / label pair for clarity.

Imports

import { HLCheckboxGroup, HLCheckbox } from '@platform-ui/highrise'

Props

Name	Type	Default	Description
id *	string	undefined	Unique identifier for the checkbox group
value	Array<string | number>	[]	The selected values (v-model binding)
disabled	boolean	false	Whether to disable all checkboxes in the group
size	'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs'	'md'	Size applied to every checkbox in the group (see note below on precedence)

Group vs. child precedence

HLCheckboxGroup shares size and disabled with its child HLCheckboxes, with these rules:

• size — the group's size wins when set; a child's own size only applies when it isn't inside a group (or the group leaves size unset, in which case the child falls back to its own value / the form size).
• disabled — combined with OR: a checkbox is disabled if either the group or the individual checkbox sets disabled. So a disabled group disables all children, and an enabled group still lets an individual checkbox disable itself.

Emits

Name	Parameters	Description
@update:value	(value: Array<string | number> | null) => void	When the selection changes

Slots

Name	Parameters	Description
default	()	The content slot for checkbox items