UI Thing

VeeCheckbox

A checkbox component that uses the composition API provided by Vee-Validate to perform validation.

Checkbox Source

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.

I love coffee

I love tea

I love water

Single checkbox

Terms of Service

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Velit, perspiciatis sunt, quae architecto, dicta nobis corrupti commodi tempora asperiores eligendi id dolore dolores. Dolores quaerat architecto in sapiente expedita cum?

Default Value

We can use the v-model prop to set the default value of the VeeCheckbox.

On by default

This checkbox will be true by default.

Forms Introduction

Check out the form elements that are created with the help of Vee-Validate to easily add validation to your Nuxt app.

VeeCurrencyInput

A currency input component that uses the composition API provided by Vee-Validate to perform validation.