mirror of
https://github.com/ArthurDanjou/ui.git
synced 2026-01-14 12:14:41 +01:00
123 lines
1.6 KiB
Markdown
123 lines
1.6 KiB
Markdown
---
|
|
description: Display a checkbox field.
|
|
links:
|
|
- label: GitHub
|
|
icon: i-simple-icons-github
|
|
to: https://github.com/nuxt/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
|
|
```vue
|
|
<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: <span class="italic">Label</span>
|
|
baseProps:
|
|
name: 'checkbox5'
|
|
---
|
|
|
|
#label
|
|
[Label]{.italic}
|
|
::
|
|
|
|
## Props
|
|
|
|
:component-props
|
|
|
|
## Preset
|
|
|
|
:component-preset
|