VInput

Vuero provides elegant form controls with minimum styling. VInput accept all attributes that <input> accepts. Always wrap your inputs inside a <VField /> and a <VControl /> to build forms quickly and efficiently.

Help Text

You can easily add a help text to guide users when they interact with your forms. Use the help prop of the <VField /> component to inject your help text string. See the code example for more details about usage.

Rounded input

You can easily change the shape of the VInput inside the field. Simply add the is-rounded class to the Html input element.

Focus Colors

An VInput can have different border colors when focused. Simply add the appropriate color modifier class. Available classes are is-primary-focus, is-success-focus, is-info-focus, is-warning-focus, is-danger-focus.

Font Awesome

Vuero VInput are fully compatible with Font Awesome 5 icons. Use the iconed prop on the <VControl /> component to show an icon. You also have to provide an icon type using the icon or iconify props.

Line Icons

Vuero VInput are fully compatible with Line Icons. Use the icon or iconify props on the <VControl /> component to show an icon.

Lucide Icons

Vuero VInput are fully compatible with any icons from icones.js. Use the icon or iconify propson the <VControl /> component to show an icon.

Input Loading

An VInput can be shown in a loading state. To apply that style, simply add the loading prop to the wrapping <VControl /> component.

Disabled input

An VInput can be shown in a disabled state. To apply that style, simply add the disabled atribute to the target input element.

Autocomplete using native datalist

You can use native datalist let your browser handle the autocomplete for you. Just add a list attribute to your input and add the datalist element with the id that matches the list attribute.

This is a great way to provide a list of options to your users.