Input

Input

Text inputs are used for freeform data entry

Base

Preview

No content has been added for this component.

No content has been added for this component.

About Input

You can style the HTML <input> element to align with the Salesforce brand by using the .slds-input class on the <input> element.

The <input> element includes support for all HTML5 types: text, password, datetime, datetime-local, date, month, time, week, number, email, url, search, tel, and color.

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.

Accessibility

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 have aria-describedby="my-error-message".

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 have aria-describedby="help".

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 .slds-form-element__control wrapper.


Overview of CSS Classes

Selector.slds-input
Summary

Initializes text input

Restrictinput
VariantTrue
Selector[readonly]
Summary
Restrict.slds-input
Selector.slds-input_bare
Summary

Removes aesthetic nature from an input

Restrict.slds-input, input, textarea
ModifierTrue
Selector.slds-input_height
Summary

Used to apply an input size to another element thats a non input Because sometimes I need elements the same height as inputs

Restrict.slds-input
Selector.slds-input_borders
Summary

Modifier to allow a [readonly] input to have borders

Restrict.slds-input