HighRise
RTL Support: Full
Accessibility: Full
Translations: Not Needed
Migration Guide: Full

Checkbox ​

A single checkbox for a binary on/off choice, with an optional label in the default slot. For a set of related checkboxes with shared value handling and a "select all", use Checkbox Group instead.

Unchecked ​

Bind the state with v-model:checked. Use size (3xs–lg) to scale the checkbox and its label.

vue
<template>
  <HLCheckbox id="unchecked-3xs" size="3xs" v-model:checked="value">Remember me - 3xs</HLCheckbox>
</template>

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

  const value = ref(false)
</script>

Checked ​

Set checked to render the checkbox in its selected state.

vue
<template>
  <HLCheckbox id="checked-3xs" checked size="3xs">Remember me - 3xs</HLCheckbox>
</template>

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

Indeterminate ​

Set indeterminate for the partial state — typically a "select all" that's only partly checked.

vue
<template>
  <HLCheckbox id="indeterminate-3xs" indeterminate size="3xs">Remember me - 3xs</HLCheckbox>
</template>

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

Disabled - Unchecked ​

Add disabled to make the checkbox non-interactive.

vue
<template>
  <HLCheckbox id="disabled-unchecked-3xs" disabled size="3xs">Remember me - 3xs</HLCheckbox>
</template>

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

Disabled - Checked ​

Combine disabled with checked for a locked, selected checkbox.

vue
<template>
  <HLCheckbox id="disabled-checked-3xs" disabled checked size="3xs">Remember me - 3xs</HLCheckbox>
</template>

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

Disabled - Indeterminate ​

Combine disabled with indeterminate for a locked, partial checkbox.

vue
<template>
  <HLCheckbox id="disabled-indeterminate-3xs" disabled indeterminate size="3xs">Remember me - 3xs</HLCheckbox>
</template>

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

Handling changes ​

Listen to @update:checked when you need the change event alongside the new state. The handler receives the new boolean value and the originating DOM Event.

vue
<template>
  <HLCheckbox id="agree-terms" :checked="agreed" size="md" @update:checked="handleChange">
    I agree to the terms
  </HLCheckbox>
</template>

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

  const agreed = ref(false)
  const handleChange = (checked: boolean, event: Event) => {
    agreed.value = checked
  }
</script>

Accessibility ​

  • Give every HLCheckbox a unique id tied to visible text via <label> or aria-labelledby, and attach helper/error copy through aria-describedby.
  • Reflect validation by toggling aria-invalid="true", and keep aria-checked (plus the indeterminate state) aligned with the bound value.

Imports ​

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

Props ​

NameTypeDefaultDescription
id *string | undefinedundefinedThe unique identifier for the checkbox
checkedboolean | undefinedundefinedWhether the checkbox is checked
indeterminateboolean | undefinedundefinedWhether the checkbox is in an indeterminate state
disabledboolean | undefinedundefinedWhether the checkbox is disabled
size'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs''md'The size of the checkbox
valuestring | numberundefinedIdentifies the checkbox within a Checkbox Group. Passed through to the underlying checkbox so the group can track which options are selected.

Emits ​

NameParametersDescription
@update:checked(value: boolean, event: Event) => voidWhen checkbox state changes

Slots ​

NameParametersDescription
default()The default content slot

Methods ​

NameTypeDescription
focus() => voidProgrammatically moves focus to the checkbox
blur() => voidProgrammatically removes focus from the checkbox