Skip to content

Checkbox Indicator

Usage ​

CheckboxIndicator displays unchecked, checked or indeterminate marks. It is decorative. It has no input, focus or form behavior.

vue
<script setup lang="ts">
import { CheckboxIndicator } from '@astryx-vue/core/CheckboxIndicator'
</script>

<template>
  <CheckboxIndicator state="indeterminate" size="sm" />
</template>

Import the theme in the application entry:

ts
import '@astryx-vue/themes/neutral.css'

States and sizes

smuncheckedcheckedindeterminate
mduncheckedcheckedindeterminate
Disabled

sm is 20px. md is 24px. Disabled indicators use reduced opacity.

For an interactive checkbox, use CheckboxInput.