Accessibility: Full

Translations: Not Needed

Migration Guide: Full

Checkbox

Atomic checkbox element

Unchecked

 

Remember me - 3xs

 

Remember me - 2xs

 

Remember me - xs

 

Remember me - sm

 

Remember me - md

 

Remember me - lg

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

 

Remember me - 3xs

 

Remember me - 2xs

 

Remember me - xs

 

Remember me - sm

 

Remember me - md

 

Remember me - lg

Vue

<template>
  <HLCheckbox id="checked-3xs" checked size="3xs">Remember me - 3xs</HLCheckbox>
</template>
<script setup lang="ts">
  import { HLCheckbox } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref(true)
</script>

Indeterminate

 

Remember me - 3xs

 

Remember me - 2xs

 

Remember me - xs

 

Remember me - sm

 

Remember me - md

 

Remember me - lg

Vue

<template>
  <HLCheckbox id="indeterminate-3xs" indeterminate size="3xs">Remember me - 3xs</HLCheckbox>
</template>
<script setup lang="ts">
  import { HLCheckbox } from '@platform-ui/highrise'
  import { ref } from 'vue'
  const value = ref(true)
</script>

Disabled - Unchecked

 

Remember me - 3xs

 

Remember me - 2xs

 

Remember me - xs

 

Remember me - sm

 

Remember me - md

 

Remember me - lg

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'
  import { ref } from 'vue'
  const value = ref(true)
</script>

Disabled - Checked

 

Remember me - 3xs

 

Remember me - 2xs

 

Remember me - xs

 

Remember me - sm

 

Remember me - md

 

Remember me - lg

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'
  import { ref } from 'vue'
  const value = ref(true)
</script>

Disabled - Indeterminate

 

Remember me - 3xs

 

Remember me - 2xs

 

Remember me - xs

 

Remember me - sm

 

Remember me - md

 

Remember me - lg

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'
  import { ref } from 'vue'
  const value = ref(true)
</script>

Imports

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

Props

Name	Type	Default	Description
id *	string | undefined	undefined	The unique identifier for the checkbox
checked	boolean | undefined	undefined	Whether the checkbox is checked
indeterminate	boolean | undefined	undefined	Whether the checkbox is in an indeterminate state
disabled	boolean | undefined	undefined	Whether the checkbox is disabled
size	'lg' | 'md' | 'sm' | 'xs' | '2xs' | '3xs'	'md'	The size of the checkbox
value	string | number	undefined	The value of the checkbox to be used in a checkbox group.

Emits

Name	Parameters	Description
@update:checked	(value: boolean, event: Event) => void	When checkbox state changes

Slots

Name	Parameters	Description
default	()	The default content slot

Methods

Name	Type	Description
focus	() => void	Triggered when checkbox gets focus
blur	() => void	Triggered when checkbox loses focus