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.

<div class="slds-form-element">
  <label class="slds-form-element__label" for="text-input-id-1">Input Label</label>
  <div class="slds-form-element__control">
    <input type="text" id="text-input-id-1" class="slds-input" placeholder="Placeholder Text" />
  </div>
</div>

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.

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're needing 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".


Overview of CSS Classes

Selector.slds-input
Summary

Initializes text input

Restrictinput
VariantTrue
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