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>
Use the default-value prop to set the initial value when you do not need to control its state.
<template>
<PCheckbox default-value />
</template>
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>
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>
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>
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>
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>
Use the color prop to change the color of the Checkbox.
<template>
<PCheckbox color="neutral" default-value label="Check me" />
</template>
Use the variant prop to change the variant of the Checkbox.
<template>
<PCheckbox color="primary" variant="card" default-value label="Check me" />
</template>
Use the size prop to change the size of the Checkbox.
<template>
<PCheckbox size="xl" variant="list" default-value label="Check me" />
</template>
Use the indicator prop to change the position or hide the indicator. Defaults to start.
<template>
<PCheckbox indicator="end" variant="card" default-value label="Check me" />
</template>
Use the disabled prop to disable the Checkbox.
<template>
<PCheckbox disabled label="Check me" />
</template>
| Prop | Default | Type |
|---|
| Slot | Type |
|---|
| Event | Type |
|---|
Below is the theme configuration skeleton for the PCheckbox. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
export default defineAppConfig({
pohon: {
checkbox: {
slots: {
root: '',
container: '',
base: '',
indicator: '',
icon: '',
wrapper: '',
label: '',
description: ''
},
variants: {
color: {
primary: {
base: '',
indicator: ''
},
secondary: {
base: '',
indicator: ''
},
success: {
base: '',
indicator: ''
},
info: {
base: '',
indicator: ''
},
warning: {
base: '',
indicator: ''
},
error: {
base: '',
indicator: ''
},
neutral: {
base: '',
indicator: ''
}
},
variant: {
list: {
root: ''
},
card: {
root: ''
}
},
indicator: {
start: {
root: '',
wrapper: ''
},
end: {
root: '',
wrapper: ''
},
hidden: {
base: '',
wrapper: ''
}
},
size: {
xs: {
base: '',
container: '',
wrapper: ''
},
sm: {
base: '',
container: '',
wrapper: ''
},
md: {
base: '',
container: '',
wrapper: ''
},
lg: {
base: '',
container: '',
wrapper: ''
},
xl: {
base: '',
container: '',
wrapper: ''
}
},
required: {
true: {
label: ''
}
},
disabled: {
true: {
root: '',
base: '',
label: '',
description: ''
}
},
checked: {
true: ''
}
},
compoundVariants: [],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'list',
indicator: 'start'
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
checkbox: {
slots: {
root: '',
container: '',
base: '',
indicator: '',
icon: '',
wrapper: '',
label: '',
description: ''
},
variants: {
color: {
primary: {
base: '',
indicator: ''
},
secondary: {
base: '',
indicator: ''
},
success: {
base: '',
indicator: ''
},
info: {
base: '',
indicator: ''
},
warning: {
base: '',
indicator: ''
},
error: {
base: '',
indicator: ''
},
neutral: {
base: '',
indicator: ''
}
},
variant: {
list: {
root: ''
},
card: {
root: ''
}
},
indicator: {
start: {
root: '',
wrapper: ''
},
end: {
root: '',
wrapper: ''
},
hidden: {
base: '',
wrapper: ''
}
},
size: {
xs: {
base: '',
container: '',
wrapper: ''
},
sm: {
base: '',
container: '',
wrapper: ''
},
md: {
base: '',
container: '',
wrapper: ''
},
lg: {
base: '',
container: '',
wrapper: ''
},
xl: {
base: '',
container: '',
wrapper: ''
}
},
required: {
true: {
label: ''
}
},
disabled: {
true: {
root: '',
base: '',
label: '',
description: ''
}
},
checked: {
true: ''
}
},
compoundVariants: [],
defaultVariants: {
size: 'md',
color: 'primary',
variant: 'list',
indicator: 'start'
}
}
}
};
With Pohon UI, you can achieve similar component functionality with less code and effort, as it comes with built-in styles mechanism and behaviors that are optimized for common use cases. Since it's using unocss-variants it adds a runtime cost, but it can be worth it if you prioritize development speed and ease of use over fine-grained control.
If this is a deal breaker for you, you can always stick to using Akar and build your own custom components on top of it.