ui/docs/content/3.components/checkbox.md

description, links

description	links
An input element to toggle between checked and unchecked states.	label icon to Checkbox i-custom-radix-vue https://www.radix-vue.com/components/checkbox.html label icon to GitHub i-simple-icons-github https://github.com/nuxt/ui/tree/v3/src/runtime/components/Checkbox.vue

Usage

Use the v-model directive to control the checked state of the Checkbox.

::component-code

ignore:

• modelValue external:
• modelValue props: modelValue: true

---

::

Use the default-value prop to set the initial value when you do not need to control its state.

::component-code

ignore:

• defaultValue props: defaultValue: true

---

::

Indeterminate

Use the indeterminate prop to set the Checkbox to an indeterminate state.

::component-code

props: indeterminate: true

::

Indeterminate Icon

Use the indeterminate-icon prop to customize the indeterminate icon. Defaults to i-heroicons-minus-20-solid.

::component-code

props: indeterminate: true indeterminateIcon: 'i-heroicons-plus-20-solid'

::

::tip{to="/getting-started/icons#theme"} You can customize this icon globally in your app.config.ts under ui.icons.minus key. ::

Label

Use the label prop to set the label of the Checkbox.

::component-code

props: label: Check me

::

When using the required prop, an asterisk is added next to the label.

::component-code

ignore:

• label props: required: true label: Check me

---

::

Description

Use the description prop to set the description of the Checkbox.

::component-code

ignore:

• label props: label: Check me description: 'This is a checkbox.'

---

::

Icon

Use the icon prop to set the icon of the Checkbox when it is checked. Defaults to i-heroicons-check-20-solid.

::component-code

ignore:

• label
• defaultValue props: icon: 'i-heroicons-heart' defaultValue: true label: Check me

---

::

::tip{to="/getting-started/icons#theme"} You can customize this icon globally in your app.config.ts under ui.icons.check key. ::

Color

Use the color prop to change the color of the Checkbox.

::component-code

ignore:

• label
• defaultValue props: color: gray defaultValue: true label: Check me

---

::

Size

Use the size prop to change the size of the Checkbox.

::component-code

ignore:

• label
• defaultValue props: size: xl defaultValue: true label: Check me

---

::

Disabled

Use the disabled prop to disable the Checkbox.

::component-code

ignore:

• label props: disabled: true label: Check me

---

::

API

Props

:component-props

Slots

:component-slots

Emits

:component-emits

Theme

:component-theme