Text inputs are used for freeform data entry
You can style the HTML
<input> element to align with the Salesforce brand
by using the
.slds-input class on the
<input> element includes support for all HTML5 types:
The static state is for form elements that can’t be modified by the user. It is used for small, non-editable form fields that sit next to inputs and allows the size and height to align. It is not meant for large paragraphs of text.
In order to have an actionable SVG within the input, like a clear
or increment/decrement button, the icon must be contained within
a button, not an anchor
<a>, in order for pointer events to work properly.
You can see examples of the correct markup in the Left Icon & Clear Button example
or the Counter example.
Inputs with errors should have
aria-describedby to insure that the
associated field level error message is read by assistive technology.
If the error message has an
id="my-error-message", then the input should
If you need some type of field level help and if your tooltips are
available on hover, make sure they’re also available on keyboard focus. The
help icon needs to be associated to the tooltip so that when the user focuses
on the icon, assistive technology reads out the content of the tooltip. If
the tooltip has an
id="help", then the
<button> containing the icon should
In some cases, the read-only field state is swapped and has no
<input>. This is called
static in the examples. In that case, don’t use a
<label>. This provides better accessibility for screen readers and keyboard navigators. Instead, use a
<span> with the
.slds-form-element__label class. Instead of an
<input>, use the
.slds-form-element__static class inside the
When using the fixed text variants for prepending or appending symbols to inputs,
please be sure to use
aria-labelledby on the input, that points to the ids of the label,
prepended text and appended text as a space separated list. The IDs must appear in that order:
label, prepended, then appended.
The reason we do this is to create a better association between the input and the supporting labels around it.
By only using the traditional
label[for] method, the fixed text is never read out in the context of editing
the input value. With using the
aria-labelledby attribute we can create a better label with all the
visual labels associated with it, in a relevant order, that is read by assistive technology when the user
needs it; when they're editing the value.
Overview of CSS Classes
- The CSS class being referred to.
- A description of what the class does.
- Whether the class name is dev-ready (meaning it's fully vetted and tested and safe to use) or prototype (which means it's not fully vetted yet).
- The selector that the class name is allowed to be used on.
- The base level pattern for a component. A variant can be extended to create another variant of that component, for example, a stateful button is a derivative of the base button.
- A single class that can be added to an HTML element of a component to modify its output. Typically these will be colors, sizing and positioning.