Checkbox

Usage

Use a v-model to make the Checkbox reactive.

<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.

<UCheckbox label="Label" />

Style

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

<UCheckbox color="primary" />

Required

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

<UCheckbox label="Label" required />

Help

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

<UCheckbox label="Label" help="Please check this box" />

Disabled

Use the disabled prop to disable the Checkbox.

<UCheckbox disabled />

Slots

label

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

<UCheckbox>
  <template #label>
    <span class="italic">Label</span>
  </template>
</UCheckbox>

Props

Preset

undefined