Checkbox
Un élément d'entrée pour basculer entre les états vérifiés et non vérifiés.
Utilisation
Utilisez la directive v-model pour contrôler l'état coché de la case à cocher.
<script setup lang="ts">
const value = ref(true)
</script>
<template>
<UCheckbox v-model="value" />
</template><script setup lang="ts">
import { ref } from 'vue'
const value = ref(true)
</script>
<template>
<UCheckbox v-model="value" />
</template>Utilisez la prop default-value pour définir la valeur initiale lorsque vous n'avez pas besoin de contrôler son état.
<template>
<UCheckbox default-value />
</template>indéterminé
Utilisez la valeur indeterminate de la directive v-model ou de la prop default-value pour définir la case à cocher sur un state](xph023) xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
<template>
<UCheckbox default-value="indeterminate" />
</template>Icône indéterminée
Utilisez la prop indeterminate-icon pour personnaliser l'icône indéterminée. Par défaut, i-lucide-minus.
<template>
<UCheckbox default-value="indeterminate" indeterminate-icon="i-lucide-plus" />
</template>Vous pouvez personnaliser cette icône globalement dans votre
app.config.ts sous la touche ui.icons.minus.Vous pouvez personnaliser cette icône globalement dans votre
vite.config.ts sous la touche ui.icons.minus.étiquette
Utilisez le prop label pour définir l'étiquette de la case à cocher.
<template>
<UCheckbox label="Check me" />
</template>Lorsque vous utilisez le prop required, un astérisque est ajouté à côté de l'étiquette.
<template>
<UCheckbox required label="Check me" />
</template>Description
Utilisez la prop description pour définir la description de la case à cocher.
This is a checkbox.
<template>
<UCheckbox label="Check me" description="This is a checkbox." />
</template>Icône
Utilisez la prop icon pour définir l'icône de la case à cocher lorsqu 'elle est cochée. Par défaut i-lucide-check.
<template>
<UCheckbox icon="i-lucide-heart" default-value label="Check me" />
</template>Vous pouvez personnaliser cette icône globalement dans votre
app.config.ts sous la touche ui.icons.check.Vous pouvez personnaliser cette icône globalement dans votre
vite.config.ts sous la touche ui.icons.check.Couleur
Utilisez le prop color pour changer la couleur de la case à cocher.
<template>
<UCheckbox color="neutral" default-value label="Check me" />
</template>Variant
Utilisez le prop variant pour modifier la variante de la case à cocher.
<template>
<UCheckbox color="primary" variant="card" default-value label="Check me" />
</template>Size
Utilisez le prop size pour modifier la taille de la case à cocher.
<template>
<UCheckbox size="xl" variant="list" default-value label="Check me" />
</template>Indicateur
Utilisez la prop indicator pour modifier la position ou masquer l'indicateur. Par défaut, start.
Lorsque
indicator est hidden, l'icône est affichée au-dessus de l'étiquette à la place.<template>
<UCheckbox
indicator="hidden"
variant="card"
icon="i-lucide-heart"
default-value
label="Check me"
/>
</template>Désactivé
Utilisez le prop disabled pour désactiver la case à cocher.
<template>
<UCheckbox disabled label="Check me" />
</template>API
Props équipements
| Prop | Default | Type |
|---|---|---|
as | 'div' | anyThe element or component this component should render as. |
label | string | |
description | string | |
color | 'primary' | "primary" | "secondary" | "success" | "info" | "warning" | "error" | "neutral" |
variant | 'list' | "card" | "list" |
size | 'md' | "xs" | "sm" | "md" | "lg" | "xl" |
indicator | 'start' | "start" | "end" | "hidden"Position of the indicator. |
highlight | boolean Highlight the ring color like a focus state. | |
icon | appConfig.ui.icons.check | anyThe icon displayed when checked, or above the label when |
indeterminateIcon | appConfig.ui.icons.minus | anyThe icon displayed when the checkbox is indeterminate. |
disabled | boolean When | |
required | boolean When | |
name | stringThe name of the field. Submitted with its owning form as part of a name/value pair. | |
value | "on" | null | string | number | bigint | Record<string, any>The value given as data when submitted with a |
id | stringId of the element | |
defaultValue | T | "indeterminate"The value of the checkbox when it is initially rendered. Use when you do not need to control its value. | |
modelValue | null | T | "indeterminate"The controlled value of the checkbox. Can be binded with v-model. | |
trueValue | TThe value used when the checkbox is checked. Defaults to | |
falseValue | TThe value used when the checkbox is unchecked. Defaults to | |
autofocus | false | true | "true" | "false" | |
ui | { root?: SlotClass; container?: SlotClass; base?: SlotClass; indicator?: SlotClass; icon?: SlotClass; wrapper?: SlotClass; label?: SlotClass; description?: SlotClass; } |
Slots
| Slot | Type |
|---|---|
label | { label: string | undefined; } |
description | { description: string | undefined; } |
Emits
| Event | Type |
|---|---|
change | [event: Event] |
update:modelValue | [value: T | "indeterminate"] |
Thème
app.config.ts
export default defineAppConfig({
ui: {
checkbox: {
slots: {
root: 'relative flex items-start',
container: 'flex items-center',
base: 'rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none',
indicator: 'flex items-center justify-center size-full text-inverted',
icon: 'shrink-0',
wrapper: 'w-full',
label: 'block font-medium text-default',
description: 'text-muted'
},
variants: {
color: {
primary: {
indicator: 'bg-primary'
},
secondary: {
indicator: 'bg-secondary'
},
success: {
indicator: 'bg-success'
},
info: {
indicator: 'bg-info'
},
warning: {
indicator: 'bg-warning'
},
error: {
indicator: 'bg-error'
},
neutral: {
indicator: 'bg-inverted'
}
},
variant: {
list: {
root: ''
},
card: {
root: [
'border border-default rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50',
'transition-colors'
]
}
},
indicator: {
start: {
root: 'flex-row',
wrapper: 'ms-2'
},
end: {
root: 'flex-row-reverse',
wrapper: 'me-2'
},
hidden: {
base: 'sr-only',
wrapper: 'flex flex-col items-center gap-1 text-center'
}
},
size: {
xs: {
base: 'size-3',
icon: 'size-2.5',
container: 'h-4',
wrapper: 'text-xs'
},
sm: {
base: 'size-3.5',
icon: 'size-3',
container: 'h-4',
wrapper: 'text-xs'
},
md: {
base: 'size-4',
icon: 'size-3.5',
container: 'h-5',
wrapper: 'text-sm'
},
lg: {
base: 'size-4.5',
icon: 'size-4',
container: 'h-5',
wrapper: 'text-sm'
},
xl: {
base: 'size-5',
icon: 'size-4.5',
container: 'h-6',
wrapper: 'text-base'
}
},
required: {
true: {
label: "after:content-['*'] after:ms-0.5 after:text-error"
}
},
disabled: {
true: {
root: 'opacity-75',
base: 'cursor-not-allowed',
label: 'cursor-not-allowed',
description: 'cursor-not-allowed'
}
},
highlight: {
true: '',
false: ''
},
checked: {
true: ''
}
},
compoundVariants: [
{
indicator: 'hidden',
class: {
container: 'h-auto'
}
},
{
variant: 'card',
highlight: false,
class: {
root: 'hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented'
}
},
{
size: 'xs',
indicator: 'hidden',
class: {
icon: 'size-3'
}
},
{
size: 'sm',
indicator: 'hidden',
class: {
icon: 'size-3.5'
}
},
{
size: 'md',
indicator: 'hidden',
class: {
icon: 'size-4'
}
},
{
size: 'lg',
indicator: 'hidden',
class: {
icon: 'size-4.5'
}
},
{
size: 'xl',
indicator: 'hidden',
class: {
icon: 'size-5'
}
},
{
size: 'xs',
variant: 'card',
class: {
root: 'p-2.5'
}
},
{
size: 'sm',
variant: 'card',
class: {
root: 'p-3'
}
},
{
size: 'md',
variant: 'card',
class: {
root: 'p-3.5'
}
},
{
size: 'lg',
variant: 'card',
class: {
root: 'p-4'
}
},
{
size: 'xl',
variant: 'card',
class: {
root: 'p-4.5'
}
},
{
color: 'primary',
variant: 'list',
indicator: [
'start',
'end'
],
class: {
base: 'outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary'
}
},
{
color: 'neutral',
variant: 'list',
indicator: [
'start',
'end'
],
class: {
base: 'outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted'
}
},
{
color: 'primary',
variant: 'card',
class: {
root: 'outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]'
}
},
{
color: 'neutral',
variant: 'card',
class: {
root: 'outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1]'
}
},
{
color: 'primary',
variant: 'list',
indicator: 'hidden',
class: {
root: 'outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]'
}
},
{
color: 'neutral',
variant: 'list',
indicator: 'hidden',
class: {
root: 'outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1]'
}
},
{
color: 'primary',
variant: 'card',
class: {
root: 'has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10'
}
},
{
color: 'neutral',
variant: 'card',
class: {
root: 'has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated'
}
},
{
variant: 'card',
disabled: true,
class: {
root: 'cursor-not-allowed'
}
},
{
color: 'primary',
indicator: 'hidden',
highlight: true,
class: {
root: 'not-has-disabled:border-primary not-has-disabled:has-data-[state=checked]:border-primary'
}
},
{
color: 'neutral',
indicator: 'hidden',
highlight: true,
class: {
root: 'not-has-disabled:border-inverted not-has-disabled:has-data-[state=checked]:border-inverted'
}
},
{
color: 'primary',
highlight: true,
class: {
base: 'ring-primary'
}
},
{
color: 'neutral',
highlight: true,
class: {
base: 'ring-inverted'
}
}
],
defaultVariants: {
highlight: false,
size: 'md',
color: 'primary',
variant: 'list',
indicator: 'start'
}
}
}
})vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'
export default defineConfig({
plugins: [
vue(),
ui({
ui: {
checkbox: {
slots: {
root: 'relative flex items-start',
container: 'flex items-center',
base: 'rounded-sm ring ring-inset ring-accented overflow-hidden focus-visible:outline-none',
indicator: 'flex items-center justify-center size-full text-inverted',
icon: 'shrink-0',
wrapper: 'w-full',
label: 'block font-medium text-default',
description: 'text-muted'
},
variants: {
color: {
primary: {
indicator: 'bg-primary'
},
secondary: {
indicator: 'bg-secondary'
},
success: {
indicator: 'bg-success'
},
info: {
indicator: 'bg-info'
},
warning: {
indicator: 'bg-warning'
},
error: {
indicator: 'bg-error'
},
neutral: {
indicator: 'bg-inverted'
}
},
variant: {
list: {
root: ''
},
card: {
root: [
'border border-default rounded-lg hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:bg-elevated/50',
'transition-colors'
]
}
},
indicator: {
start: {
root: 'flex-row',
wrapper: 'ms-2'
},
end: {
root: 'flex-row-reverse',
wrapper: 'me-2'
},
hidden: {
base: 'sr-only',
wrapper: 'flex flex-col items-center gap-1 text-center'
}
},
size: {
xs: {
base: 'size-3',
icon: 'size-2.5',
container: 'h-4',
wrapper: 'text-xs'
},
sm: {
base: 'size-3.5',
icon: 'size-3',
container: 'h-4',
wrapper: 'text-xs'
},
md: {
base: 'size-4',
icon: 'size-3.5',
container: 'h-5',
wrapper: 'text-sm'
},
lg: {
base: 'size-4.5',
icon: 'size-4',
container: 'h-5',
wrapper: 'text-sm'
},
xl: {
base: 'size-5',
icon: 'size-4.5',
container: 'h-6',
wrapper: 'text-base'
}
},
required: {
true: {
label: "after:content-['*'] after:ms-0.5 after:text-error"
}
},
disabled: {
true: {
root: 'opacity-75',
base: 'cursor-not-allowed',
label: 'cursor-not-allowed',
description: 'cursor-not-allowed'
}
},
highlight: {
true: '',
false: ''
},
checked: {
true: ''
}
},
compoundVariants: [
{
indicator: 'hidden',
class: {
container: 'h-auto'
}
},
{
variant: 'card',
highlight: false,
class: {
root: 'hover:not-has-disabled:not-has-focus-visible:not-has-data-[state=checked]:border-accented'
}
},
{
size: 'xs',
indicator: 'hidden',
class: {
icon: 'size-3'
}
},
{
size: 'sm',
indicator: 'hidden',
class: {
icon: 'size-3.5'
}
},
{
size: 'md',
indicator: 'hidden',
class: {
icon: 'size-4'
}
},
{
size: 'lg',
indicator: 'hidden',
class: {
icon: 'size-4.5'
}
},
{
size: 'xl',
indicator: 'hidden',
class: {
icon: 'size-5'
}
},
{
size: 'xs',
variant: 'card',
class: {
root: 'p-2.5'
}
},
{
size: 'sm',
variant: 'card',
class: {
root: 'p-3'
}
},
{
size: 'md',
variant: 'card',
class: {
root: 'p-3.5'
}
},
{
size: 'lg',
variant: 'card',
class: {
root: 'p-4'
}
},
{
size: 'xl',
variant: 'card',
class: {
root: 'p-4.5'
}
},
{
color: 'primary',
variant: 'list',
indicator: [
'start',
'end'
],
class: {
base: 'outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary'
}
},
{
color: 'neutral',
variant: 'list',
indicator: [
'start',
'end'
],
class: {
base: 'outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted'
}
},
{
color: 'primary',
variant: 'card',
class: {
root: 'outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]'
}
},
{
color: 'neutral',
variant: 'card',
class: {
root: 'outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1]'
}
},
{
color: 'primary',
variant: 'list',
indicator: 'hidden',
class: {
root: 'outline-primary/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-primary has-focus-visible:z-[1]'
}
},
{
color: 'neutral',
variant: 'list',
indicator: 'hidden',
class: {
root: 'outline-inverted/25 has-focus-visible:outline-3 not-has-disabled:has-focus-visible:border-inverted has-focus-visible:z-[1]'
}
},
{
color: 'primary',
variant: 'card',
class: {
root: 'has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10'
}
},
{
color: 'neutral',
variant: 'card',
class: {
root: 'has-data-[state=checked]:border-inverted/50 has-data-[state=checked]:bg-elevated'
}
},
{
variant: 'card',
disabled: true,
class: {
root: 'cursor-not-allowed'
}
},
{
color: 'primary',
indicator: 'hidden',
highlight: true,
class: {
root: 'not-has-disabled:border-primary not-has-disabled:has-data-[state=checked]:border-primary'
}
},
{
color: 'neutral',
indicator: 'hidden',
highlight: true,
class: {
root: 'not-has-disabled:border-inverted not-has-disabled:has-data-[state=checked]:border-inverted'
}
},
{
color: 'primary',
highlight: true,
class: {
base: 'ring-primary'
}
},
{
color: 'neutral',
highlight: true,
class: {
base: 'ring-inverted'
}
}
],
defaultVariants: {
highlight: false,
size: 'md',
color: 'primary',
variant: 'list',
indicator: 'start'
}
}
}
})
]
})Changelog écrit
No recent changes