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

github, description

github	description
true	Display a checkbox field.

Usage

Use a v-model to make the Checkbox reactive.

::component-example #default :checkbox-example

#code

<script setup>
const selected = ref(false)
</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'

::

Required

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

::component-card

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

::

Help

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

::component-card

baseProps: name: 'checkbox3' 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

::

Props

:component-props

Preset

:component-preset