Usage
Use the v-model directive to control the checked state of the Checkbox.
<script setup lang="ts">
const value = ref(true)
</script>
<template>
<PCheckbox v-model="value" />
</template><script setup lang="ts">
import { ref } from 'vue'
const value = ref(true)
</script>
<template>
<PCheckbox v-model="value" />
</template>Use the default-value prop to set the initial value when you do not need to control its state.
<template>
<PCheckbox default-value />
</template>Indeterminate
Use the indeterminate value in the v-model directive or default-value prop to set the Checkbox to an indeterminate state.
<template>
<PCheckbox default-value="indeterminate" />
</template>Indeterminate Icon
Use the indeterminate-icon prop to customize the indeterminate icon. Defaults to i-lucide-minus.
<template>
<PCheckbox default-value="indeterminate" indeterminate-icon="i-lucide-plus" />
</template>Label
Use the label prop to set the label of the Checkbox.
<template>
<PCheckbox label="Check me" />
</template>When using the required prop, an asterisk is added next to the label.
<template>
<PCheckbox required label="Check me" />
</template>Description
Use the description prop to set the description of the Checkbox.
This is a checkbox.
<template>
<PCheckbox label="Check me" description="This is a checkbox." />
</template>Icon
Use the icon prop to set the icon of the Checkbox when it is checked. Defaults to i-lucide-check.
<template>
<PCheckbox icon="i-lucide-heart" default-value label="Check me" />
</template>Color
Use the color prop to change the color of the Checkbox.
<template>
<PCheckbox color="neutral" default-value label="Check me" />
</template>Variant
Use the variant prop to change the variant of the Checkbox.
<template>
<PCheckbox color="primary" variant="card" default-value label="Check me" />
</template>Size
Use the size prop to change the size of the Checkbox.
<template>
<PCheckbox size="xl" variant="list" default-value label="Check me" />
</template>Indicator
Use the indicator prop to change the position or hide the indicator. Defaults to start.
When
indicator is hidden, the icon is displayed above the label instead.<template>
<PCheckbox
indicator="hidden"
variant="card"
icon="i-lucide-heart"
default-value
label="Check me"
/>
</template>Disabled
Use the disabled prop to disable the Checkbox.
<template>
<PCheckbox disabled label="Check me" />
</template>API
Props
| Prop | Default | Type |
|---|
Slots
| Slot | Type |
|---|
Emits
| Event | Type |
|---|
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-border-accented overflow-hidden focus-visible:outline-none',
indicator: 'flex items-center justify-center size-full',
icon: 'shrink-0',
wrapper: 'w-full',
label: 'block font-500 color-text',
description: 'color-text-muted'
},
variants: {
color: {
primary: {
indicator: 'bg-primary color-primary-foreground'
},
secondary: {
indicator: 'bg-secondary color-secondary-foreground'
},
success: {
indicator: 'bg-success color-success-foreground'
},
info: {
indicator: 'bg-info color-info-foreground'
},
warning: {
indicator: 'bg-warning color-warning-foreground'
},
error: {
indicator: 'bg-error color-error-foreground'
},
neutral: {
indicator: 'bg-background-inverted color-text-inverted'
}
},
variant: {
list: {
root: ''
},
card: {
root: [
'border border-border rounded-lg hover:[&:not(:has(:disabled,[aria-disabled=true],:focus-visible,[data-state=checked]))]:bg-background-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:color-error after:ms-0.5 after:content-['*']"
}
},
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,[aria-disabled=true],:focus-visible,[data-state=checked]))]:border-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 has-focus-visible:[&:not(:has(:disabled,[aria-disabled=true]))]:border-primary has-focus-visible:z-1'
}
},
{
color: 'neutral',
variant: 'card',
class: {
root: 'outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:[&:not(:has(:disabled,[aria-disabled=true]))]:border-inverted has-focus-visible:z-1'
}
},
{
color: 'primary',
variant: 'list',
indicator: 'hidden',
class: {
root: 'outline-primary/25 has-focus-visible:outline-3 has-focus-visible:[&:not(:has(:disabled,[aria-disabled=true]))]:border-primary has-focus-visible:z-1'
}
},
{
color: 'neutral',
variant: 'list',
indicator: 'hidden',
class: {
root: 'outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:[&:not(:has(:disabled,[aria-disabled=true]))]: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-border-inverted/50 has-data-[state=checked]:bg-background-elevated'
}
},
{
variant: 'card',
disabled: true,
class: {
root: 'cursor-not-allowed'
}
},
{
color: 'primary',
indicator: 'hidden',
highlight: true,
class: {
root: '[&:not(:has(:disabled,[aria-disabled=true]))]:border-primary [&:not(:has(:disabled,[aria-disabled=true])):has([data-state=checked])]:border-primary'
}
},
{
color: 'neutral',
indicator: 'hidden',
highlight: true,
class: {
root: '[&:not(:has(:disabled,[aria-disabled=true]))]:border-border-inverted [&:not(:has(:disabled,[aria-disabled=true])):has([data-state=checked])]:border-border-inverted'
}
},
{
color: 'primary',
highlight: true,
class: {
base: 'ring-primary'
}
},
{
color: 'neutral',
highlight: true,
class: {
base: 'ring-border-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 'pohon-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-border-accented overflow-hidden focus-visible:outline-none',
indicator: 'flex items-center justify-center size-full',
icon: 'shrink-0',
wrapper: 'w-full',
label: 'block font-500 color-text',
description: 'color-text-muted'
},
variants: {
color: {
primary: {
indicator: 'bg-primary color-primary-foreground'
},
secondary: {
indicator: 'bg-secondary color-secondary-foreground'
},
success: {
indicator: 'bg-success color-success-foreground'
},
info: {
indicator: 'bg-info color-info-foreground'
},
warning: {
indicator: 'bg-warning color-warning-foreground'
},
error: {
indicator: 'bg-error color-error-foreground'
},
neutral: {
indicator: 'bg-background-inverted color-text-inverted'
}
},
variant: {
list: {
root: ''
},
card: {
root: [
'border border-border rounded-lg hover:[&:not(:has(:disabled,[aria-disabled=true],:focus-visible,[data-state=checked]))]:bg-background-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:color-error after:ms-0.5 after:content-['*']"
}
},
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,[aria-disabled=true],:focus-visible,[data-state=checked]))]:border-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 has-focus-visible:[&:not(:has(:disabled,[aria-disabled=true]))]:border-primary has-focus-visible:z-1'
}
},
{
color: 'neutral',
variant: 'card',
class: {
root: 'outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:[&:not(:has(:disabled,[aria-disabled=true]))]:border-inverted has-focus-visible:z-1'
}
},
{
color: 'primary',
variant: 'list',
indicator: 'hidden',
class: {
root: 'outline-primary/25 has-focus-visible:outline-3 has-focus-visible:[&:not(:has(:disabled,[aria-disabled=true]))]:border-primary has-focus-visible:z-1'
}
},
{
color: 'neutral',
variant: 'list',
indicator: 'hidden',
class: {
root: 'outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:[&:not(:has(:disabled,[aria-disabled=true]))]: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-border-inverted/50 has-data-[state=checked]:bg-background-elevated'
}
},
{
variant: 'card',
disabled: true,
class: {
root: 'cursor-not-allowed'
}
},
{
color: 'primary',
indicator: 'hidden',
highlight: true,
class: {
root: '[&:not(:has(:disabled,[aria-disabled=true]))]:border-primary [&:not(:has(:disabled,[aria-disabled=true])):has([data-state=checked])]:border-primary'
}
},
{
color: 'neutral',
indicator: 'hidden',
highlight: true,
class: {
root: '[&:not(:has(:disabled,[aria-disabled=true]))]:border-border-inverted [&:not(:has(:disabled,[aria-disabled=true])):has([data-state=checked])]:border-border-inverted'
}
},
{
color: 'primary',
highlight: true,
class: {
base: 'ring-primary'
}
},
{
color: 'neutral',
highlight: true,
class: {
base: 'ring-border-inverted'
}
}
],
defaultVariants: {
highlight: false,
size: 'md',
color: 'primary',
variant: 'list',
indicator: 'start'
}
}
}
})
]
})Changelog
No recent changes