ui/docs/content/3.forms/5.checkbox.md

description, links

description	links
Display a checkbox field.	label icon to GitHub i-simple-icons-github https://github.com/nuxtlabs/ui/blob/dev/src/runtime/components/forms/Checkbox.vue

Usage

Use a v-model to make the Checkbox reactive.

::component-example #default :checkbox-example

#code

<script setup>
const selected = ref(true)
</script>

<template>
  <UCheckbox v-model="selected" name="notifications" label="Notifications" />
</template>

::

Label

Use the label prop to display a label on the right.

::component-card

baseProps: name: 'checkbox1' props: label: 'Label'

::

Style

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

::component-card

baseProps: name: 'checkbox2' label: 'Label' props: color: 'primary'

::

Required

Use the required prop to display a red star next to the label.

::component-card

baseProps: name: 'checkbox3' props: label: 'Label' required: true

::

Help

Use the help prop to display some text under the Checkbox.

::component-card

baseProps: name: 'checkbox4' props: label: 'Label' help: 'Please check this box'

::

Disabled

Use the disabled prop to disable the Checkbox.

::component-card

baseProps: name: 'checkbox4' modelValue: true props: disabled: true

::

Slots

label

Use the #label slot to override the content of the label.

::component-card

slots: label: Label baseProps: name: 'checkbox5'

#label [Label]{.italic} ::

Props

:component-props

Preset

:component-preset