About Inputs#

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.

Pointer Events#

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.

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" and aria-invalid="true".

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.

Mobile#

On mobile devices, such as phones and other devices that have touch as the primary method of interaction, inputs will have an increased size to accommodate tapping with a finger instead of the more precise mouse cursor.

Below is a live example of what to expect in that context. No code changes are needed in the Salesforce platform context as this change occurs automatically in Salesforce native mobile applications. For those users not on the Salesforce platform, these modifications will occur automatically when the secondary touch stylesheet is loaded and the device has touch as the primary method of interaction.

States#

Required#

<div class="slds-form-element">
  <label class="slds-form-element__label" for="text-input-id-1">
    <abbr class="slds-required" title="required">* </abbr>Input Label</label>
  <div class="slds-form-element__control">

Disabled#

<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" placeholder="Placeholder text…" disabled="" class="slds-input" />

Error#

<div class="slds-form-element slds-has-error">
  <label class="slds-form-element__label" for="text-input-id-1">
    <abbr class="slds-required" title="required">* </abbr>Input Label</label>
  <div class="slds-form-element__control">

Error with icon#

<div class="slds-form-element slds-has-error">
  <label class="slds-form-element__label" for="text-input-id-1">
    <abbr class="slds-required" title="required">* </abbr>Input Label</label>
  <div class="slds-form-element__control slds-input-has-icon slds-input-has-icon_left">

Read Only#

<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" readonly="" placeholder="" class="slds-input" value="Read Only" />

Examples#

With Icons#

Icon on the left#

A left aligned icon cannot be paired with fixed text.

<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 slds-input-has-icon slds-input-has-icon_left">
    <svg class="slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default" aria-hidden="true">

Icon on the right#

<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 slds-input-has-icon slds-input-has-icon_right">
    <svg class="slds-icon slds-input__icon slds-input__icon_right slds-icon-text-default" aria-hidden="true">

Icon and clear button#

<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 slds-input-has-icon slds-input-has-icon_left-right">
    <svg class="slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default" aria-hidden="true">

Icon and clear button, with loading spinner#

<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 slds-input-has-icon slds-input-has-icon_left-right slds-input-has-icon_group-right">
    <svg class="slds-icon slds-input__icon slds-input__icon_left slds-icon-text-default" aria-hidden="true">

Fixed Text#

Fixed text cannot be paired with an icon that is aligned left.

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:

1. label,
2. prepended
3. 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.

<div class="slds-form-element">
  <label class="slds-form-element__label" for="text-input-id-1" id="fixed-text-label">Input Label</label>
  <div class="slds-form-element__control slds-input-has-fixed-addon">
    <span class="slds-form-element__addon" id="fixed-text-addon-pre">$</span>

Inline Help#

<div class="slds-form-element">
  <label class="slds-form-element__label" for="text-input-id-1" id="inline-text-label">Input Label</label>
  <div class="slds-form-element__control">
    <input type="text" id="text-input-id-1" placeholder="Placeholder text…" aria-describedby="error-message-unique-id" class="slds-input" aria-invalid="true" />

Field Level Help#

<div style="padding-top:3rem;position:relative">
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="text-input-id-1">Input Label</label>
    <div class="slds-form-element__icon">

Styling Hooks Overview#