Input (native HTML)
Text-based input fields
Demo
API
For additional information about forms and its common elements see Form.
Tags
| Name | Description |
|---|---|
<input>
|
Standard HTML tag, no content |
Attributes
In addition to the attributes documented here, all standard attributes apply. See MDN <input> Attributes for official docs.
| Name | Value | Required | Description |
|---|---|---|---|
type |
|
|
Sets the expected value type. Please adhere to the right type guideline. Note: the submit type is not supported. See submit button guideline. |
autofocus |
Boolean attribute |
|
Automatically sets focus on the input. It is expected that this is used whenever possible. See autofocus guideline. |
Classes
| Name | Description |
|---|---|
success
|
Applies success styling and shows input-msg |
warning
|
Applies warn styling and shows input-msg |
error
|
Applies error styling and shows input-msg |
div.ai-assisted-wrapper
|
Applies AI-assisted styling to the input. This is a wrapper that contains the input and an icon. The icon is a |
Guidelines
Accessibility
Use id="{{input-label}}" and for="{{input-label}}"
in inputs and labels so screen readers will properly associate them with each other.
Ensure input messages, when they are displayed, have an id that is set to the same value as the
associated input's aria-describedby attribute.
Autofill/Autocomplete
When applicable, please include the autocomplete attribute on inputs. This is extremely helpful for a
broad range of users, but particularly for those on screen readers who may take longer for text input than some other
users. See MDN documentation for a range of acceptable values for this attribute.
Use the right type
Inputs should use the most appropriate type. For example, if the expected value is an email address then
use type="email" not type="text". This is not only more semantic, but some devices depend on
this for triggering very helpful features, like the email and number keyboards on iOS devices.
Autofocus
More often than not it is very helpful to the user to automatically focus the primary input on the page (think username field on a registration page). Leverage this free feature whenever possible.
Submit button
Use <button type="submit"> and avoid <input type="submit">. The former is more
semantic, will have proper styles, allows for nesting other elements (e.g. Icon, Loader), and functions the same as
the submit input type when used inside a form.
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.
Input messages
The <div> with class input-msg will only display when the preceding input has a class
of success, warning, or error. The text content must contain the leading
<s-icon> indicated in the code sample above. Be sure to include aria-hidden="true" on
the <s-icon> element to ensure compatibility with screen readers.
Design
Design resources can be found on the Skylab design documentation site: skylab.avalara.com