Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/nuxt/ui/llms.txt

Use this file to discover all available pages before exploring further.

​
Usage

The Checkbox component allows users to select or deselect options. It supports labels, descriptions, and indeterminate state. 
<template>
  <UCheckbox v-model="checked" label="Accept terms and conditions" />
</template>

<script setup>
const checked = ref(false)
</script>

​
With Description

Add a description to provide additional context: 
<template>
  <UCheckbox
    v-model="checked"
    label="Subscribe to newsletter"
    description="Receive updates about new features and releases"
  />
</template>

<script setup>
const checked = ref(false)
</script>

​
Indeterminate State

The checkbox supports an indeterminate state for partial selections: 
<template>
  <UCheckbox
    v-model="state"
    label="Select all items"
  />
</template>

<script setup>
const state = ref('indeterminate')
</script>

​
Variants

Checkboxes come in different variants: 
<template>
  <div class="space-y-4">
    <UCheckbox v-model="checked" label="List variant" variant="list" />
    <UCheckbox v-model="checked" label="Default variant" />
  </div>
</template>

<script setup>
const checked = ref(false)
</script>

​
Sizes

<template>
  <div class="space-y-4">
    <UCheckbox v-model="checked" label="Small" size="sm" />
    <UCheckbox v-model="checked" label="Medium" size="md" />
    <UCheckbox v-model="checked" label="Large" size="lg" />
  </div>
</template>

<script setup>
const checked = ref(false)
</script>

​
Colors

<template>
  <div class="space-y-4">
    <UCheckbox v-model="checked" label="Primary" color="primary" />
    <UCheckbox v-model="checked" label="Success" color="success" />
    <UCheckbox v-model="checked" label="Warning" color="warning" />
    <UCheckbox v-model="checked" label="Error" color="error" />
  </div>
</template>

<script setup>
const checked = ref(false)
</script>

​
Disabled

<template>
  <UCheckbox v-model="checked" label="Disabled checkbox" disabled />
</template>

<script setup>
const checked = ref(false)
</script>

​
Custom Icons

<template>
  <UCheckbox
    v-model="checked"
    label="Custom icons"
    icon="i-heroicons-heart"
    indeterminate-icon="i-heroicons-minus"
  />
</template>

<script setup>
const checked = ref(false)
</script>

​
Slots

Customize the label and description using slots: 
<template>
  <UCheckbox v-model="checked">
    <template #label>
      <span class="font-bold">Custom Label</span>
    </template>
    <template #description>
      <span class="text-sm">Custom description content</span>
    </template>
  </UCheckbox>
</template>

<script setup>
const checked = ref(false)
</script>

​
Props

​
modelValue
boolean | 'indeterminate'
The controlled checked state of the checkbox. Can be bound with v-model.
​
defaultValue
boolean | 'indeterminate'
The default checked state when initially rendered. Use when you do not need to control the state.
​
label
string
The label text for the checkbox.
​
description
string
The description text displayed below the label.
​
color
string
default:"primary"
The color theme of the checkbox.
​
variant
string
default:"list"
The visual variant of the checkbox.
​
size
string
default:"md"
The size of the checkbox. Options: sm, md, lg.
​
indicator
string
default:"start"
Position of the checkbox indicator. Options: start, end.
​
icon
string
The icon displayed when checked. Defaults to appConfig.ui.icons.check.
​
indeterminateIcon
string
The icon displayed when the checkbox is indeterminate. Defaults to appConfig.ui.icons.minus.
​
disabled
boolean
When true, prevents user interaction with the checkbox.
​
required
boolean
When true, indicates that the checkbox must be checked.
​
name
string
The name of the checkbox for form submission.
​
value
string
The value of the checkbox when used in a form.
​
id
string
The id attribute of the checkbox input element.
​
as
any
default:"div"
The element or component this component should render as.
​
class
any
Additional CSS classes to apply to the root element.
​
ui
object
UI customization object for styling different parts of the checkbox.

​
Events

​
@change
(event: Event) => void
Emitted when the checkbox state changes.
​
@update:modelValue
(value: boolean | 'indeterminate') => void
Emitted when the checked state changes.

​
Slots

​
label
{ label?: string }
Customize the label content.
​
description
{ description?: string }
Customize the description content.

Build docs developers (and LLMs) love

Get started for freeTalk to us