VeeCheckbox
A checkbox component that uses the composition API provided by Vee-Validate to perform validation.
Source code
Click here to see the source code for this component on GitHub. Feel free to copy it and adjust it for your own use.
Installation
npx ui-thing@latest add vee-checkbox
Usage
Grouping checkboxes
Checkboxes can be tricky to implement with validation libraries. Luckily, Vee-Validate takes care of the heavy lifting for us. Take a look at the Building Checkboxes Docs for more information on how this works.
Single checkbox
Default Value
We can use the v-model prop to set the default value of the VeeCheckbox.
Origin UI Examples
These are some examples that I found today over here Origin UI. I think they are cool.
To use these examples you will have to copy the code and adjust it for your own use.
Colored Checkbox
Simple Todo
Fancy Todo
Terms of Service
Frameworks
Right Aligned
Label w/ Sublabel
You can use this checkbox with a label and a description.
Input Expansion
Check the Checkbox to expand the input field.
Right Aligned w/ Sublabel
You can use this checkbox with a label and a description.