VeeInput
An input 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-input
Usage
User form
In the form below, we are using the useForm composition function provided by Vee-Validate to handle the form submission and validation. The useForm composable accepts a validationSchema option that we can use to define our validation rules. We are using the zod library to define our validation rules. You can use any validation library you want as long as it is supported by Vee-Validate and can be passed to the toTypedSchema function.
Origin UI
Here we have some examples that come from Origin UI.
Not all examples are copied but these should give you a good idea of what you can do with the VeeInput component.
Required Input
Input with Helper Text
We won't share your email with anyone
Input with label hint
Input with Colored Ring
Input with Gray Background
Disabled Input
Input with Start Icon
Input with End Icon
Input with Start Inline Addon
Input with End Inline Addon
Input with Inline Addons
Input with Start Addon
Input with End Addon
Input with Inline Start & End Addon
Input with Start Select
Input with End Select
Input with End Inline Button
Input with End Icon Button
Input with End Button
Input with Button
Input with Show/Hide Password
Input with Clear Button
Input with <kbd>
Search Input with Icon & Button
Search Input with Loader Icon
Input with Overlapping Label
Input with Password Strength Indicator
Enter a password. Must contain:
- At least 8 characters - Requirement not met
- At least 1 special character - Requirement not met
- At least 1 number - Requirement not met
- At least 1 lowercase letter - Requirement not met
- At least 1 uppercase letter - Requirement not met