Welcome

VField

Vuero come with VField, VControl and VLabel which are utility components to compose Accessible Forms with ease. The component VField will keep track of an unique input.

Inline label

You can set the horizontal attribute of VField so the label will be inlined.

Id Tracking

The main purpose of the VField component is to keep track of an unique input. It can then be used to be used to set for and aria-describedby attributes. You can create new field context using the subcontrol propery on VControl and VField components.

VField addons

Inputs can have addons if you need to show contextual information. You can attach an addon at the end of a <VField /> with the addons prop. See markup for more details about usage.

Start addons

Inputs can have addons if you need to show contextual information. You can attach an addon at the start of a <VField /> with the addons prop. See markup for more details about usage.

Rounded addons

Since input addons are button elements, usual modifier classes apply to them. You can use the rounded on both the input and the button inside the addon element to create a rounded field with addons.

Bi-Directional addons

Inputs can have addons on both sides. You can even attach a select element to your <VControl /> component. Please refer to the code example for more details about usage.

Note that if you need multiple inputs (like a <VSelect> addons for currency selection), you should wrap this other input with <VControl subcontrol> or <VField subcontrol> component.