Forms

Checkbox

GitHub

Display a checkbox field.

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" label="Label" />

Required

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

<UCheckbox label="Label" required />

Help

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

Please check this box

<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

ui
any
undefined
value
string | number | boolean | Record<string, any>
null
name
string
null
id
string
null
label
string
null
modelValue
boolean | unknown[]
null
color
string
config.default.color
help
string
null
inputClass
string
""
required
boolean
false
disabled
boolean
false
checked
boolean
false
indeterminate
boolean
false

Config

{
  "wrapper": "relative flex items-start",
  "base": "h-4 w-4 dark:checked:bg-current dark:checked:border-transparent dark:indeterminate:bg-current dark:indeterminate:border-transparent disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent",
  "rounded": "rounded",
  "color": "text-{color}-500 dark:text-{color}-400",
  "background": "bg-white dark:bg-gray-900",
  "border": "border border-gray-300 dark:border-gray-700",
  "ring": "focus-visible:ring-2 focus-visible:ring-{color}-500 dark:focus-visible:ring-{color}-400 focus-visible:ring-offset-2 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900",
  "label": "font-medium text-gray-700 dark:text-gray-200",
  "required": "text-red-500 dark:text-red-400",
  "help": "text-gray-500 dark:text-gray-400",
  "default": {
    "color": "primary"
  }
}

SelectMenu

Display a select menu with advanced features.

RadioGroup

Display a set of radio buttons.