forms
Checkbox
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" name="checkbox1" />Style
Use the color prop to change the style of the Checkbox.
<UCheckbox color="primary" name="checkbox2" label="Label" />Required
Use the required prop to display a red star next to the label.
<UCheckbox label="Label" required name="checkbox3" />Help
Use the help prop to display some text under the Checkbox.
Please check this box
<UCheckbox label="Label" help="Please check this box" name="checkbox4" />Disabled
Use the disabled prop to disable the Checkbox.
<UCheckbox disabled name="checkbox4" value="true" />Slots
label
Use the #label slot to override the content of the label.
<UCheckbox name="checkbox5"> <template #label> <span class="italic">Label</span> </template></UCheckbox>Props
value
string | number | boolean | Record<string, any>
nullname
string
nullui
any
undefinedid
string
uid()color
any
config.default.colorlabel
string
nullhelp
string
nullmodelValue
boolean | unknown[]
nullinputClass
string
""required
boolean
falsedisabled
boolean
falsechecked
boolean
falseindeterminate
boolean
falsePreset
{ "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" }}