Forms

Form are essential to most applications and provide the user with a way to manipulate data

Basic Input Elements

The VSETH component provides some basic input elements that can be used to build more complex forms. The most basic one is Input which is a wrapper around a standard HTML <input/> element.

Raw input elements should only be used in rare case, for example in order to build a more complicated form by combining multiple text inputs. It should also be noted that only subset of the available types of inputs should be used because the browser support of some input types might be limited. Although that is the case it still should be preferred to use the correct type depending on the use case so that the browser can auto complete a form correctly.

These components can be used like any other form element either by controlling the value directly or letting them manage their state by themselves by giving them a defaultValue attribute. Most input elements should be controlled by your state unless there are performance problems.

The InputField component is rendered as an input with an additional label that can be supplied as an attribute:

Checkboxes and radio buttons are a bit special because additional markup is required in order to make the customizable using CSS. By default the checkbox / radio button input itself is hidden and a pseudo element attached to the label functions as the checkbox. In order to use a checkbox / radio button you have to apply a check attribute to both the FormGroup and the surrounding label:

Custom Input Elements

These components mimic the behavior of the included input elements but they make them more customizable, giving theme developers more possibilities to apply custom styles. They expose the underlying native element using their API. Additional attributes are passed to the input element so that custom input elements can be used almost like any other input element.