Form controls

Form control components may be simple or compound, but they all have one thing in common: they help you generate forms and come with subtle rules and options to "do well".

Form controls are the most interactive part of the web beyond a linke to another page. They also come with a lot of variation and best practice. For example, each form control should have a label element associated with it. That means each form control element should have an id attribute, because the label element is associated with the form control using the for attribute. This combination allows assistive technologies to recognize the label and point to the form control; or, vice versa. Further, if there's an error, you will typically want to have a different bit of text stating what the error is, which ammends the form component with an aria-describedby attribute.

There is also the idea that all form elements need to have a name attribute to identify them when the form is posted; those names need to be unique within the form. Going back to the id referenced above, they must be unique to the page.

All of this is actually one of the reasons we have a great deal of respect for the US Web Design system. That's also what inspired us to adopt the pattern we did for all form controls.

Each form control consists of a container, either a div or fieldset. A label or legend that identifies the form control or group of form element. An optional hint text (span). An optional error text (span). Each configuration requires, at minimum, a label and a name (must be unique to the page, not just the form).

<div>
<label for="{name}">{label}</label>
<input id="{name}" type="text">
</div>

Again, all of this is taken care of for you by the kit.

All form controls have the same basic required and optional keys.

Required keys

Optional keys