forms
Display a checkbox field.
<UCheckbox />Use the label prop to display a label on the right.
<UCheckbox label="Label" />Use the required prop to display a red star next to the label.
<UCheckbox label="Label" required />Use the help prop to display some text under the Checkbox.
Please check this box
<UCheckbox label="Label" help="Please check this box" />Use the disabled prop to disable the Checkbox.
<UCheckbox disabled />| Prop | Default | Description |
|---|---|---|
value | null | string | number | boolean |
modelValue | null | boolean | unknown[] |
name | null | string |
label | null | string |
help | null | string |
required | false | boolean |
disabled | false | boolean |
ui | appConfig.ui.checkbox | any |
{
"wrapper": "relative flex items-start",
"base": "h-4 w-4 text-primary-500 dark:text-primary-400 focus-visible:ring-2 focus-visible:ring-offset-2 bg-white dark:bg-gray-900 dark:checked:bg-current dark:checked:border-transparent focus-visible:ring-primary-500 dark:focus-visible:ring-primary-400 focus-visible:ring-offset-white dark:focus-visible:ring-offset-gray-900 border-gray-300 dark:border-gray-700 disabled:opacity-50 disabled:cursor-not-allowed focus:ring-0 focus:ring-transparent focus:ring-offset-transparent rounded",
"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"
}