Components

Checkbox

GitHub
Display a checkbox field.

Usage

Use a v-model to make the Checkbox reactive.

<script setup lang="ts">
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.

<template>
  <UCheckbox label="Label" />
</template>

Style

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

<template>
  <UCheckbox color="primary" label="Label" />
</template>

Required

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

<template>
  <UCheckbox label="Label" required />
</template>

Help

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

Please check this box

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

Disabled

Use the disabled prop to disable the Checkbox.

<template>
  <UCheckbox disabled />
</template>

Slots

label

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

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

help

Like the #label slot, use the #help slot to override the content of the help text.

Props

name
string
null
value
string | number | boolean | Record<string, any>
null
label
string
null
color
string
config.default.color
ui
{ wrapper?: string; container?: string; base?: string; form?: string; rounded?: string; color?: string; background?: string; border?: string; ring?: string; inner?: string; label?: string; required?: string; help?: string; default?: DeepPartial<...>; } & { ...; } & { ...; }
{}
help
string
null
id
string
null
modelValue
boolean | any[]
null
inputClass
string
""
required
boolean
false
indeterminate
boolean
undefined
disabled
boolean
false

Config

{
  wrapper: 'relative flex items-start',
  container: 'flex items-center h-5',
  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',
  form: 'form-checkbox',
  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',
  inner: 'ms-3 flex flex-col',
  label: 'text-sm font-medium text-gray-700 dark:text-gray-200',
  required: 'text-sm text-red-500 dark:text-red-400',
  help: 'text-sm text-gray-500 dark:text-gray-400',
  default: {
    color: 'primary'
  }
}

Carousel

Display images or content in a scrollable area.

Chip

Display a chip indicator on any component.