---
github: true
description: Display a checkbox field.
---

## Usage

Use a `v-model` to make the Checkbox reactive.

::component-example
#default
:checkbox-example

#code
```vue
<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