A single checkbox, with its label beside it.
Import it from rei-kit:
import { BaseCheckbox } from 'rei-kit'
Open BaseCheckbox in the live documentation, where every prop below is a control you can change, in four materials and ten palettes.
<script setup lang="ts">
import { ref } from 'vue'
import { BaseCheckbox } from 'rei-kit'
const remember = ref(false)
</script>
<template>
<BaseCheckbox v-model="remember" label="Remember me" />
</template>
| Prop | Type | Required or default | What it is for |
|---|---|---|---|
label | string | yes | |
error | string | '' | |
hint | string | '' | |
disabled | boolean | false | |
size | 'sm' | 'md' | 'md' | `md` is a setting: a line the reader came here to change, in ink. `sm` is an aside — "remember me" under a sign-in form, "show the ones I have learned" above a list — quieter and tighter. The two are not a guess. Of the five hand-written checkboxes across the three consuming apps, four were the aside and one was the setting, and they differed in exactly these two ways. |
indeterminate | boolean | false | Neither checked nor unchecked: some of what this box stands for is. It is a DOM property and not an attribute, so it cannot be written in markup and there is no `indeterminate=""` to set — which is why a "select all" box on top of a list is the one checkbox every app ends up writing by hand. The kit's own `DataTable` did, for exactly this reason. It is presentation only: the value underneath is still `true` or `false`, and pressing the box resolves it. |
labelHidden | boolean | false | Hides the words but keeps them as the accessible name. For a box in a table header or a list row whose surroundings already say what it is — dropping the label would leave the control named nothing at all. |
rei-kit is an accessible Vue 3 and Tailwind CSS 4 component library: 106 components, themed by role rather than by colour on three independent axes — ten WCAG-checked palettes, four materials and light or dark, each switched with one attribute. Typed, tested, SSR-safe, no runtime dependencies, MIT.