Accessibility: Partial

Translations: Not Needed

Migration Guide: Full

Checkbox Group

Group of checkboxes for multiple selections

Basic Usage

 

Option 1

 

Option 2

 

Option 3

Vue

<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 } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref(['option1'])
</script>

Different Sizes

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

Vue

<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, HLSpace, HLCheckbox } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref(['option1'])
</script>

Vertical Layout

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

Vue

<template>
  <HLCheckboxGroup id="vertical-group" v-model:value="value" direction="vertical">
    <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, HLSpace, HLCheckbox } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref(['option1'])
</script>

Disabled States

 

Option 1

 

Option 2

 

Option 3

Vue

<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, HLSpace, HLCheckbox } 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

Vue

<template>
  <HLFormItem validation-status="error" validation-message="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, HLSpace, HLCheckbox } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref(['option1'])
</script>

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 of all checkboxes in the group
direction	'horizontal' | 'vertical'	'horizontal'	Layout direction of the checkbox group

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