Checkbox
선택된 상태와 선택되지 않은 상태 사이를 전환하는 입력 요소입니다.
Usage
v-model 지시어를 사용하여 체크 박스의 선택된 상태를 제어합니다.
<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>상태를 제어할 필요가 없을 때 default-value prop을 사용하여 초기 값을 설정합니다.
<template>
<UCheckbox default-value />
</template>indeterminate 불확정
v-model 지시어 또는 default-value prop의 indeterminate 값을 사용하여 Checkbox를 indeterminate state로 설정합니다.
<template>
<UCheckbox default-value="indeterminate" />
</template>미정 아이콘
indeterminate-icon 소품을 사용하여 불확정 아이콘을 사용자 정의합니다. 기본값은 i-lucide-minus입니다.
<template>
<UCheckbox default-value="indeterminate" indeterminate-icon="i-lucide-plus" />
</template>Label 태그
label prop을 사용하여 체크 상자의 레이블을 설정합니다.
<template>
<UCheckbox label="Check me" />
</template>required 소품을 사용할 때 레이블 옆에 별표가 추가됩니다.
<template>
<UCheckbox required label="Check me" />
</template>Description
description prop을 사용하여 Checkbox에 대한 설명을 설정합니다.
This is a checkbox.
<template>
<UCheckbox label="Check me" description="This is a checkbox." />
</template>Icon
icon prop을 사용하여 체크 박스 아이콘을 설정합니다. 기본값은 i-lucide-check입니다.
<template>
<UCheckbox icon="i-lucide-heart" default-value label="Check me" />
</template>Color 색상
color Prop을 사용하여 체크 상자의 색상을 변경합니다.
<template>
<UCheckbox color="neutral" default-value label="Check me" />
</template>Variant
variant Prop을 사용하여 Checkbox의 변형을 변경합니다.
<template>
<UCheckbox color="primary" variant="card" default-value label="Check me" />
</template>Size
size Prop을 사용하여 Checkbox의 크기를 변경합니다.
<template>
<UCheckbox size="xl" variant="list" default-value label="Check me" />
</template>표시기
indicator 소품을 사용하여 위치를 변경하거나 표시기를 숨깁니다. 기본값은 start입니다.
indicator가 hidden인 경우 아이콘이 대신 레이블 위에 표시됩니다.<template>
<UCheckbox
indicator="hidden"
variant="card"
icon="i-lucide-heart"
default-value
label="Check me"
/>
</template>비활성 화 됨
disabled prop을 사용하여 Checkbox를 비활성화합니다.
<template>
<UCheckbox disabled label="Check me" />
</template>API 파일
Props 코드
| 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; } |
슬롯
| Slot | Type |
|---|---|
label | { label: string | undefined; } |
description | { description: string | undefined; } |
Emits
| Event | Type |
|---|---|
change | [event: Event] |
update:modelValue | [value: T | "indeterminate"] |
Theme 테마
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'
}
}
}
})
]
})변경 로그
No recent changes