Form
Forms and other form-related elements
Demo
API
For additional information and demo of inputs, see Input.
Tags
| Name | Description |
|---|---|
<form>
|
Standard HTML tag, accepts content |
<fieldset>
|
Standard HTML tag, accepts all form elements. |
<label>
|
Standard HTML tag, accepts content. |
Classes
| Name | Description |
|---|---|
div.input-desc
|
Optional description. Place this directly after the input or checkbox/radio group. |
div.input-msg
|
Optional validation message shown only when input or checkbox/radio group has class error, warning, success. Place this after the form element and any .input-desc text. |
label.required
|
Styles a required input's label. |
label.disabled
|
Styles a disabled input's label. |
Attributes
All standard attributes apply. See MDN <form> Attributes for official docs.
Guidelines
Accessibility
The form should have a heading, either inside the form element or directly above in an <h> tag.
Use id="{{input-id}}" and for="{{input-id}}" in
inputs and labels so screen readers will properly associate them with each other.
Use aria-describedby="{{description-id}}" on any input that has a description or
validation message associated with it. aria-describedby can have multiple space-separated values.
Add the aria-required="true" attribute to any required inputs.
Add the aria-invalid="true" attribute to an input whose contents are found to be invalid.
Submit buttons
Do not use <input type="submit">. See Submit button
Guideline on the Input page.
Label element and styling
The <label> HTML element should only be used within a form (and fieldset). To achieve the same
styling outside of a form, use the text-label utility class.
Inline fields
Inline input fields should use the grid when possible. They can be grouped within a single fieldset, using the grid inside the fieldset element if they are related inputs. Otherwise use a grid row with individual inputs within each column.
Inline input fields should never have a description line. If an input field requires a description, it should have its own row.
Design
Design resources can be found on the Skylab design documentation site: skylab.avalara.com