Checkbox · juxt.ui

Installation #

With the Nuxt module, every component is auto-imported — there is nothing to add. In a plain Vue project, import what you use:

import { JCheckbox } from '@juxtui/ui'

Usage #

<JCheckbox v-model="accepted" label="I agree to the terms" />

Variants & examples #

With description#

Weekly digestA summary of activity, every Monday.

MentionsOnly when someone mentions you directly.

<script setup lang="ts">
const digest = ref(true)
const mentions = ref(false)
</script>

<template>
  <div class="flex flex-col gap-4">
    <JCheckbox v-model="digest" label="Weekly digest" description="A summary of activity, every Monday." />
    <JCheckbox v-model="mentions" label="Mentions" description="Only when someone mentions you directly." />
  </div>
</template>

Indeterminate#

For “select all” rows where only some children are checked.

Release checklist

Run tests

Build documentation

Publish to npm

<script setup lang="ts">
const items = ref([
  { label: 'Run tests', checked: true },
  { label: 'Build documentation', checked: false },
  { label: 'Publish to npm', checked: false },
])

const all = computed(() => items.value.every(item => item.checked))
const some = computed(() => items.value.some(item => item.checked) && !all.value)

function toggleAll(value: boolean) {
  items.value.forEach(item => (item.checked = value))
}
</script>

<template>
  <div class="flex flex-col gap-3">
    <JCheckbox :model-value="all" :indeterminate="some" label="Release checklist" @update:model-value="toggleAll" />
    <div class="ml-6.5 flex flex-col gap-3">
      <JCheckbox v-for="item in items" :key="item.label" v-model="item.checked" :label="item.label" />
    </div>
  </div>
</template>

Disabled#

Unavailable option

Required by your plan

<template>
  <div class="flex flex-col gap-4">
    <JCheckbox label="Unavailable option" disabled />
    <JCheckbox :model-value="true" label="Required by your plan" disabled />
  </div>
</template>

API #

Props

Prop	Type	Default	Description
modelValue	`boolean`	`false`	Bound with `v-model`.
label	`string`	—	Label text. The default slot overrides it.
description	`string`	—	Supporting text under the label.
indeterminate	`boolean`	`false`	Shows a dash. Set by you, typically from the state of child checkboxes.
disabled	`boolean`	`false`	Disables the checkbox.
required	`boolean`	`false`	Native required.
name	`string`	—	Form field name.
value	`string`	—	Form value when checked.

Events

Event	Payload	Description
update:modelValue	`boolean`	Emitted when toggled.

Slots

Slot	Props	Description
default	—	Custom label content.
description	—	Custom description content.

Accessibility #

Built on a native <input type="checkbox">, visually replaced but never removed — forms, autofill and screen readers behave as expected.
indeterminate is applied as the DOM property, so it is announced as “mixed”.
The hit area extends a few pixels beyond the box for easier pointer use.

Keyboard #

Key	Action
`Space`	Toggles the checkbox.