Components
Checkbox
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 New
Like the #label slot, use the #help slot to override the content of the help text.
Props
value
string | number | boolean | Record<string, any>
nullname
string
nulllabel
string
nullcolor
string
config.default.colorui
{}
{}id
string
nullhelp
string
nullmodelValue
boolean | unknown[]
nullinputClass
string
""required
boolean
falsedisabled
boolean
falseindeterminate
boolean
undefinedConfig
{
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',
},
}