Checkbox

Stable

Select one or more options from a set.

<script setup lang="ts">
import { HCheckbox } from '@holistics/design-system'
import { ref } from 'vue'

const checked = ref(false)
</script>

<template>
  <div class="flex flex-wrap items-center gap-x-4 gap-y-2">
    <HCheckbox
      v-model="checked"
      label="Remember me"
    />

    <HCheckbox
      v-model="checked"
    />

    <HCheckbox
      v-model="checked"
      label="Disabled"
      disabled
    />
  </div>
</template>

API

Pass-through: <div>

What does this mean?

All props, events, and attrs that are not specified in the tables below will be passed to the element/component described above.

Props

Name	Type	Description
modelValue	boolean
label	string
description	string
name	string
value	any
disabled	boolean
required	boolean

Events

Name	Parameters	Description
@update:modelValue	[value: boolean]

Slots

Name	Scoped	Description
#default	any
#description	any