Components

Forms

An HTML form contains interactive controls to submit information to a web server.

InputInput › DefaultInput › With icon to the leftInput › With icon to the rightInput › With icon to the left and rightInput › RequiredInput › ErrorInput › Error with iconInput › DisabledInput › Read onlyInput › With fixed textInput › Read only With fixed textInputdev ready

Preview

Code

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

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".

TextareaTextarea › DefaultTextarea › RequiredTextarea › ErrorTextarea › DisabledTextarea › Read onlyTextareadev ready

Preview

Code

<div class="slds-form-element">
  <label class="slds-form-element__label" for="textarea-input-01">Textarea Label</label>
  <div class="slds-form-element__control">
    <textarea id="textarea-input-01" class="slds-textarea" placeholder="Placeholder Text"></textarea>
  </div>
</div>

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

RadioRadio › DefaultRadio › RequiredRadio › ErrorRadio › DisabledRadiodev ready

Preview

Code

<fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Radio Group Label</legend>
  <div class="slds-form-element__control">
    <span class="slds-radio">
      <input type="radio" id="radio-1954" name="options" checked="" />
      <label class="slds-radio__label" for="radio-1954">
        <span class="slds-radio--faux"></span>
        <span class="slds-form-element__label">Radio Label One</span>
      </label>
    </span>
    <span class="slds-radio">
      <input type="radio" id="radio-1955" name="options" />
      <label class="slds-radio__label" for="radio-1955">
        <span class="slds-radio--faux"></span>
        <span class="slds-form-element__label">Radio Label Two</span>
      </label>
    </span>
  </div>
</fieldset>

Radio buttons are shown in a group of two or more. The user can only select one radio button at a time. You should use the same name attribute on all radio buttons in the group. This ensures that if there is more than one group in the form, each one stays associated with its own group.

The ability to style radio buttons with CSS varies across browsers. To ensure that radio buttons look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work.

Accessibility

Groups of radio buttons should be marked up using the fieldset and legend element. This helps someone using assistive technology to understand the question they're answering with the group of radio buttons. The fieldset is placed around the whole group and the legend contains the question.

Custom radio buttons are created by applying the .slds-radio class to a <label> element. To remain accessible to all user agents, place an <input> with type="radio" inside the <label> element. The <input> is then visually hidden, and the styling is placed on a span with the .slds-radio--faux class. The styling of the span changes based on whether the radio button is selected or focused by using a pseudo-element. A second span with .slds-form-element__label contains the label text.

When a radio group is required, the <fieldset> should receive the class .slds-is-required. The <legend> should then get <abbr class="required" title="required">*</abbr> added to the DOM for visual indication that the radio group is required.

Radio Group AlternateRadio Group Alternate › DefaultRadio Group Alternate › Has errorRadio Group Alternate › DisabledRadio Group Alternatedev ready

Preview

Code

<fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Scheduled Day(s)</legend>
  <div class="slds-form-element__control">
    <div class="slds-radio--button-group">
      <span class="slds-button slds-radio--button">
        <input type="radio" name="radio" id="monday" />
        <label class="slds-radio--button__label" for="monday">
          <span class="slds-radio--faux">Mon</span>
        </label>
      </span>
      <span class="slds-button slds-radio--button">
        <input type="radio" name="radio" id="tuesday" />
        <label class="slds-radio--button__label" for="tuesday">
          <span class="slds-radio--faux">Tue</span>
        </label>
      </span>
      <span class="slds-button slds-radio--button">
        <input type="radio" name="radio" id="wednesday" />
        <label class="slds-radio--button__label" for="wednesday">
          <span class="slds-radio--faux">Wed</span>
        </label>
      </span>
      <span class="slds-button slds-radio--button">
        <input type="radio" name="radio" id="thursday" />
        <label class="slds-radio--button__label" for="thursday">
          <span class="slds-radio--faux">Thu</span>
        </label>
      </span>
      <span class="slds-button slds-radio--button">
        <input type="radio" name="radio" id="friday" />
        <label class="slds-radio--button__label" for="friday">
          <span class="slds-radio--faux">Fri</span>
        </label>
      </span>
    </div>
  </div>
</fieldset>

CheckboxCheckbox › DefaultCheckbox › IndeterminateCheckbox › RequiredCheckbox › ErrorCheckbox › DisabledCheckbox › GroupCheckbox › Group RequiredCheckbox › Group with errorCheckbox › Group DisabledCheckboxdev ready

Preview

Code

<div class="slds-form-element">
  <div class="slds-form-element__control">
    <span class="slds-checkbox">
      <input type="checkbox" name="options" id="checkbox-1956" checked="" />
      <label class="slds-checkbox__label" for="checkbox-1956">
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">Checkbox Label</span>
      </label>
    </span>
  </div>
</div>

The ability to style checkboxes with CSS varies across browsers. To ensure that checkboxes look the same everywhere, we use a custom DOM. Pay close attention to the markup, because all elements must exist for the styles to work.

Accessibility

Groups of checkboxes should be marked up using the fieldset and legend element. This helps someone using assistive technology to understand the question they're answering with the group of checkboxes. The fieldset is placed around the whole group and the legend contains the question.

Custom checkboxes are created by applying the .slds-checkbox class to a <label> element. To remain accessible to all user agents, place <input> with type="checkbox" inside the <label> element. The <input> is then visually hidden, and the styling is placed on a span with the .slds-checkbox--faux class. The styling of the span changes based on whether the checkbox is selected or focused by using a pseudo-element. A second span with .slds-form-element__label contains the label text.

When a single checkbox is required, <div class="slds-checkbox"> should get <abbr class="required" title="required">*</abbr> added to the DOM, directly before the <input type="checkbox" /> for visual indication that the checkbox is required.

When a checkbox group is required, the <fieldset> should receive the class .slds-is-required. The <legend> should then get <abbr class="required" title="required">*</abbr> added to the DOM for visual indication that the checkbox group is required.

As SLDS checkboxes rely on the :checked psuedo selector, and the indeterminate state is only accessible via JavaScript, the use of a CSS class on the input will be necessary to implement this in SLDS. Use JavaScript to add the class when the indeterminate property is set to true on the input.

The following JavaScript demonstrates how to set a checkbox to be indeterminate:

var checkbox = document.getElementById('checkbox-indeterminate-01');checkbox.indeterminate = true;

Checkbox ToggleCheckbox Toggle › DefaultCheckbox Toggle › CheckedCheckbox Toggle › DisabledCheckbox Toggledev ready

Preview

Code

<div class="slds-form-element">
  <label class="slds-checkbox--toggle slds-grid">
    <span class="slds-form-element__label slds-m-bottom--none">Toggle Label</span>
    <input type="checkbox" name="checkbox" aria-describedby="toggle-desc" />
    <span id="toggle-desc" class="slds-checkbox--faux_container" aria-live="assertive">
      <span class="slds-checkbox--faux"></span>
      <span class="slds-checkbox--on">Enabled</span>
      <span class="slds-checkbox--off">Disabled</span>
    </span>
  </label>
</div>

Checkbox AlternateCheckbox Alternate › DefaultCheckbox Alternate › Has errorCheckbox Alternate › DisabledCheckbox Alternatedev ready

Preview

Code

<fieldset class="slds-form-element">
  <legend class="slds-form-element__legend slds-form-element__label">Scheduled Day(s)</legend>
  <div class="slds-form-element__control">
    <div class="slds-checkbox--button-group">
      <span class="slds-button slds-checkbox--button" for="monday">
        <input type="checkbox" name="checkbox" id="monday" />
        <label class="slds-checkbox--button__label" for="monday">
          <span class="slds-checkbox--faux">Mon</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="tuesday">
        <input type="checkbox" name="checkbox" id="tuesday" />
        <label class="slds-checkbox--button__label" for="tuesday">
          <span class="slds-checkbox--faux">Tue</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="wednesday">
        <input type="checkbox" name="checkbox" id="wednesday" />
        <label class="slds-checkbox--button__label" for="wednesday">
          <span class="slds-checkbox--faux">Wed</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="thursday">
        <input type="checkbox" name="checkbox" id="thursday" />
        <label class="slds-checkbox--button__label" for="thursday">
          <span class="slds-checkbox--faux">Thu</span>
        </label>
      </span>
      <span class="slds-button slds-checkbox--button" for="friday">
        <input type="checkbox" name="checkbox" id="friday" />
        <label class="slds-checkbox--button__label" for="friday">
          <span class="slds-checkbox--faux">Fri</span>
        </label>
      </span>
    </div>
  </div>
</fieldset>

Checkbox Add ButtonCheckbox Add Button › DefaultCheckbox Add Button › CheckedCheckbox Add Button › DisabledCheckbox Add Buttondev ready

Preview

Code

<div class="slds-checkbox--add-button">
  <input type="checkbox" class="slds-assistive-text" id="add-checkbox-1957" />
  <label for="add-checkbox-1957" class="slds-checkbox--faux">
    <span class="slds-assistive-text">Add product</span>
  </label>
</div>

The ‘add button’ is similar to a checkbox in that it presents a user with a binary choice for an item. However, the only action a user can take is to add (or remove) an entity. When a user clicks the add button, the entity is stored, similar to an ‘add to cart’ experience, until the user saves changes.

The add button is useful for increasing clarity. Since the button only adds or removes entities, the user knows the action they will prompt upon click. The add button also provides a clear visual affordance (in SLDS, we use the ‘+’ icon as an metaphor for ‘add’) and a large target to take this action.

Use the add button if the component you’re building:

  • Exists without other multi-select elements (i.e. checkboxes)
  • Allows users to select multiple entities
  • Semantically fits the add/remove model

SelectSelect › DefaultSelect › RequiredSelect › ErrorSelect › DisabledSelect › Multiple SelectionSelectdev ready

Preview

Code

<div class="slds-form-element">
  <label class="slds-form-element__label" for="select-01">Select Label</label>
  <div class="slds-form-element__control">
    <div class="slds-select_container">
      <select id="select-01" class="slds-select">
        <option>Option One</option>
        <option>Option Two</option>
        <option>Option Three</option>
      </select>
    </div>
  </div>
</div>

The HTML <select> element presents a menu of options. The options within the menu are represented by <option> elements that you can group with <optgroup> elements. You can pre-select options for the user.

For a multiple options selections, adding the attribute multiple to the <select> will enable this functionality. Note, if you need multiple option selections, you will need to remove the <div class="slds-select_container"> from the DOM, otherwise you'll get display issues.

If you need more advanced styling, consider using a Picklist.

Multi SelectMulti Select › DefaultMulti Select › Selected ItemMulti Select › Multiple Selected ItemsMulti Select › GrabbedMulti Select › Moved in listMulti Select › DroppedMulti Select › Moved to listMulti SelectprototypeNot Compatible with S1 Mobile

Preview

Code

Code will be available when this component reaches a Dev-Ready state.

Multi Select picklists that allow for draggable options between picklists. Picklist options can also be re-ordered.

Accessibility

This component is essentially 2 ARIA listboxes side by side, so we follow the [ARIA practices guide](https://www.w3.org/TR/wai-aria-practices/#Listbox) to help implement their interaction in an accessible way. Some additional details, supplementary to the ARIA guide include:

Notable attributes

  • aria-multiselectable="true" should be set on each listbox
  • aria-selected should be placed on each role="option, and only set to true when selected
  • aria-labelledby is used to identify the list to the user and should point to the list label
  • aria-describedby is used to provide operation instructions for the Drag and Drop interaction

Keyboard navigation

  • Each list is a tab stop. This provides identification and operation instruction as provided by aria-describedby and aria-labelledby. State of the overall list is also provided, including total number and number of selected options in the list when focused.
  • Because we support drag and drop re-ordering, we implement the second multi-select keyboard model.
    • Up and Down arrows move focus and selection, with aria-selected="true"
    • shift + up and shift + down moved focus and creates addition selections
    • ctrl + down or ctrl + up moves focus but selection remains where it is
    • ctrl + space toggles selection on the focused option, in addition to previous selections
    • ctrl + a selects all options in the list
    • cmd/ctrl + right and cmd/ctrl + left Moves selected items between lists
    • space toggles "Drag and Drop" mode. When in "Drag and Drop" mode:
      • Up and Down arrows move the selected items within the current list

Updating Operation and State

  • As a user interacts with the component, pay close attention to the content of the aria-live region and the option-drag-label assistive text. This is to provide clear instruction to the user on how to proceed, and what has happened in each State the component will be in

Horizontal FormHorizontal Formdev ready

Preview

Code

<div class="slds-form--horizontal">
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="inputSample2">Text Input</label>
    <div class="slds-form-element__control">
      <input type="text" id="inputSample2" class="slds-input" placeholder="Placeholder Text" />
    </div>
  </div>
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="textareaSample2">Textarea Label</label>
    <div class="slds-form-element__control">
      <textarea id="textareaSample2" class="slds-textarea"></textarea>
    </div>
  </div>
  <fieldset class="slds-form-element">
    <legend class="slds-form-element__legend slds-form-element__label">Checkbox Group label</legend>
    <div class="slds-form-element__control">
      <label class="slds-checkbox" for="opportunities-ownership">
        <input type="checkbox" name="default" id="opportunities-ownership" />
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">All opportunities owned by you</span>
      </label>
      <label class="slds-checkbox" for="contact-ownership">
        <input type="checkbox" name="default" id="contact-ownership" />
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">All contacts in the account owned by you</span>
      </label>
    </div>
  </fieldset>
  <fieldset class="slds-form-element">
    <legend class="slds-form-element__legend slds-form-element__label">Radio Group label</legend>
    <div class="slds-form-element__control">
      <label class="slds-radio" for="lead">
        <input type="radio" name="options" id="lead" />
        <span class="slds-radio--faux"></span>
        <span class="slds-form-element__label">Lead Generation</span>
      </label>
      <label class="slds-radio" for="education">
        <input type="radio" name="options" id="education" />
        <span class="slds-radio--faux"></span>
        <span class="slds-form-element__label">Education Leads</span>
      </label>
    </div>
  </fieldset>
  <div class="slds-form-element">
    <div class="slds-form-element__control">
      <label class="slds-checkbox" for="agree">
        <input type="checkbox" name="default" id="agree" />
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">I agree to the Terms &amp; Service</span>
      </label>
    </div>
  </div>
</div>

To horizontally align a <label> and <input>, use the .slds-form--horizontal class on the wrapper around the form. A .slds-form-element__label takes up 33% of the width, and the .slds-form-element__control uses the remaining 66%.

Stacked FormStacked Formdev ready

Preview

Code

<div class="slds-form--stacked">
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="inputSample2">Text Input</label>
    <div class="slds-form-element__control">
      <input type="text" id="inputSample2" class="slds-input" placeholder="Placeholder Text" />
    </div>
  </div>
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="textareaSample2">Textarea Label</label>
    <div class="slds-form-element__control">
      <textarea id="textareaSample2" class="slds-textarea"></textarea>
    </div>
  </div>
  <fieldset class="slds-form-element">
    <legend class="slds-form-element__legend slds-form-element__label">Checkbox Group label</legend>
    <div class="slds-form-element__control">
      <label class="slds-checkbox" for="opportunities-ownership">
        <input type="checkbox" name="default" id="opportunities-ownership" />
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">All opportunities owned by you</span>
      </label>
      <label class="slds-checkbox" for="contact-ownership">
        <input type="checkbox" name="default" id="contact-ownership" />
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">All contacts in the account owned by you</span>
      </label>
    </div>
  </fieldset>
  <fieldset class="slds-form-element">
    <legend class="slds-form-element__legend slds-form-element__label">Checkbox Group label</legend>
    <div class="slds-form-element__control">
      <label class="slds-radio" for="lead">
        <input type="radio" name="options" id="lead" />
        <span class="slds-radio--faux"></span>
        <span class="slds-form-element__label">Lead Generation</span>
      </label>
      <label class="slds-radio" for="education">
        <input type="radio" name="options" id="education" />
        <span class="slds-radio--faux"></span>
        <span class="slds-form-element__label">Education Leads</span>
      </label>
    </div>
  </fieldset>
  <div class="slds-form-element">
    <div class="slds-form-element__control">
      <label class="slds-checkbox" for="agree">
        <input type="checkbox" name="default" id="agree" />
        <span class="slds-checkbox--faux"></span>
        <span class="slds-form-element__label">I agree to the Terms &amp; Service</span>
      </label>
    </div>
  </div>
</div>

To vertically stack <label> and <input> pairs, place .slds-form--stacked on the wrapper of the form for optimal spacing.

Inline FormInline Formdev ready

Preview

Code

<form class="slds-form--inline">
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="name">Name</label>
    <div class="slds-form-element__control">
      <input type="text" id="name" class="slds-input" />
    </div>
  </div>
  <div class="slds-form-element">
    <label class="slds-form-element__label" for="email">Email</label>
    <div class="slds-form-element__control">
      <input type="text" id="email" class="slds-input" />
    </div>
  </div>
  <div class="slds-form-element">
    <button type="button" class="slds-button slds-button--brand">Send</button>
  </div>
</form>

To horizontally align form elements on the same axis, use .slds-form--inline on the form wrapper.

Compound FormCompound Formdev ready

Preview

Code

<fieldset class="slds-form--compound">
  <legend class="slds-form-element__label slds-text-title--caps">Location</legend>
  <div class="slds-form-element__group">
    <div class="slds-form-element__row">
      <div class="slds-form-element slds-size--1-of-2">
        <label class="slds-form-element__label" for="input-01">Latitude</label>
        <input type="text" id="input-01" class="slds-input" />
      </div>
      <div class="slds-form-element slds-size--1-of-2">
        <label class="slds-form-element__label" for="input-02">Longitude</label>
        <input type="text" id="input-02" class="slds-input" />
      </div>
    </div>
  </div>
</fieldset>
<fieldset class="slds-form--compound">
  <legend class="slds-form-element__label slds-text-title--caps">Address</legend>
  <div class="slds-form-element__group">
    <div class="slds-form-element__row">
      <div class="slds-form-element slds-size--1-of-1">
        <label class="slds-form-element__label" for="input-03">Street</label>
        <input type="text" id="input-03" class="slds-input" />
      </div>
    </div>
    <div class="slds-form-element__row">
      <div class="slds-form-element slds-size--1-of-2">
        <label class="slds-form-element__label" for="input-04">City</label>
        <input type="text" id="input-04" class="slds-input" />
      </div>
      <div class="slds-form-element slds-size--1-of-2">
        <label class="slds-form-element__label" for="input-05">State</label>
        <input type="text" id="input-05" class="slds-input" />
      </div>
    </div>
    <div class="slds-form-element__row">
      <div class="slds-form-element slds-size--1-of-2">
        <label class="slds-form-element__label" for="input-06">ZIP Code</label>
        <input type="text" id="input-06" class="slds-input" />
      </div>
    </div>
  </div>
</fieldset>

A compound form consists of form groups that are labeled by the <legend> of a <fieldset>. The <fieldset> requires the .slds-form--compound class. By default, the form groups within the fieldset are vertically stacked. To horizontally align the label (for example, <legend class="slds-form-element__label">), use the .slds-form--compound--horizontal class.

A form group needs a containing <div> with the .slds-form-element__group class applied to it. Within .slds-form-element__group you can have multiple rows of compound fields by wrapping a row in a <div> with the .slds-form-element__row class.

Pay close attention to the markup of a form control within a compound field, because it differs slightly from other form elements. A form control can receive a sizing helper class, for example: .slds-size--1-of-3, to modify the width of the input field. See Sizing utilities for more sizing options.

Field Level HelpField Level Helpdev ready

Preview

Code

<div class="slds-form-element">
  <div class="slds-form-element__label">
    <label class="slds-align-middle" for="form-help">Text Label</label>
  </div>
  <div class="slds-form-element__icon">
    <a href="javascript:void(0);">
      <svg class="slds-icon slds-icon--x-small slds-icon-text-default" aria-hidden="true">
        <use xlink:href="/assets/icons/utility-sprite/svg/symbols.svg#info"></use>
      </svg>
      <span class="slds-assistive-text">Help</span>
    </a>
  </div>
  <div class="slds-form-element__control">
    <input type="text" id="form-help" class="slds-input" placeholder="Field Level Help" aria-describedby="help" />
  </div>
</div>
<div id="help" class="slds-popover slds-popover--tooltip slds-nubbin--bottom-left" role="tooltip" aria-live="polite" style="position:absolute;top:15px;left:103px;margin-left:-1rem;width:20rem;">
  <div class="slds-popover__body slds-text-longform">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci facere eligendi reiciendis obcaecati.</p>
  </div>
</div>

The popover tooltip should be positioned with JavaScript.

You can include inline help tooltips for form elements. If your tooltips are available on hover, also make sure that they’re available on keyboard focus. To allow screen readers to access the tooltip, the HTML form field element must have an aria-describedby attribute that points to the tooltip ID of the tooltip.

Docked Form FooterDocked Form Footer › DefaultDocked Form Footer › With error(s)Docked Form Footer › With error popoverDocked Form Footerdev ready

Preview

Code

<div class="slds-docked-form-footer">
  <button type="button" class="slds-button slds-button--neutral">Cancel</button>
  <button type="button" class="slds-button slds-button--brand">Save</button>
</div>

The popover should be positioned with JavaScript.

When errors are found within a form, the user will be notified with a popover with the page-level errors listed out. Please provide a contextually specific title for the dialog with the aria-label attribute. e.g. "Acme Global edit form errors"

Component Overview

For optimum spacing and layout, wrap each element in .slds-form-element. Layout helper classes are available through the following class names, .slds-form--stacked, .slds-form--horizontal and .slds-form--inline.

The read-only state is for form elements that can’t be modified. 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.

Because the read-only field state has no <input>, don’t use a <label> to provide 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.

Every form field requires an associated, non-empty text <label> element, which is linked to the form field either by wrapping the <label> tag around the field or by giving the <label> a for attribute whose value is that input field’s id. This association ensures that assistive technology users can tell what information to enter where.

Error states alert the user when content in the form is invalid. The .slds-has-error class is placed on the <div class=".slds-form-element">. Place the error message for the user in a <span> with the .slds-form-element__help class. The <input> with the error receives an `aria-describedby` attribute that references the ID attribute of the error message in the <span>. This configuration allows screen readers to properly associate the error message with the field.

When an <input> is required, add the HTML attribute required to it.

The native form elements, <input>, <textarea>, <select>, <input type='checkbox'>, and <input type='radio'>, receive validation styling for disabled, checked, and checked disabled, if applicable.

Form Example

Example Form Element Help
Opportunity Owner
Erin Buck
Options
Default

Usage

This table gives you a quick overview of the SLDS CSS classes that can be applied to this component.
Class NameUsage
.slds-form-element
Applied to:

<div>

Outcome:

Initializes form element

Required:

Required

Comments:

--

.slds-form-element__label
Applied to:

<div>

Outcome:

Initializes form element label

Required:

Required

Comments:

--

.slds-form-element__control
Applied to:

<div>

Outcome:

Initializes form element control

Required:

Required

Comments:

Control can contain an <input>, <textarea>, <select>

.slds-form-element__icon
Applied to:

<div>

Outcome:

The icon wrapper for an icon within a form element, this icon is usually used to indicate an error or field level help

Required:

No, optional element or modifier

Comments:

--

.slds-input
Applied to:

<input>

Outcome:

Initializes text input

Required:

Required

Comments:

--

.slds-input--small
Deprecated
Applied to:

.slds-input

Outcome:

Applies styles for a smaller text input

Required:

No, optional element or modifier

Comments:

Removed in version 2.0.0

.slds-input--bare
Applied to:

.slds-input

Outcome:

Removes background and border from text input

Required:

No, optional element or modifier

Comments:

--

.slds-input-has-icon
Applied to:

<div> around <input>

Outcome:

Lets text input know how to position .slds-input__icon

Required:

No, optional element or modifier

Comments:

The <div> contains both the <svg> and the <input>

.slds-input__icon
Applied to:

<svg>

Outcome:

Hook for .slds-input-has-icon

Required:

No, optional element or modifier

Comments:

--

.slds-input__icon--left
Applied to:

<svg> or <button>

Outcome:

Hook for .slds-input-has-icon--left-right

Required:

No, optional element or modifier

Comments:

--

.slds-input__icon--right
Applied to:

<svg> or <button>

Outcome:

Hook for .slds-input-has-icon--left-right

Required:

No, optional element or modifier

Comments:

--

.slds-input-has-icon--left
Applied to:

.slds-input-has-icon

Outcome:

Positions .slds-input__icon to the left of the text input

Required:

No, optional element or modifier

Comments:

--

.slds-input-has-icon--right
Applied to:

.slds-input-has-icon

Outcome:

Positions .slds-input__icon to the right of the text input

Required:

No, optional element or modifier

Comments:

--

.slds-input-has-icon--left-right
Applied to:

.slds-input-has-icon

Outcome:

Positions .slds-input__icon--left to the left of the text input and .slds-input__icon--right to the right of the text input

Required:

No, optional element or modifier

Comments:

--

.slds-input-has-fixed-addon
Applied to:

The <div> contains both the .slds-form-element__addon and the <input>

Outcome:

Use on input container to let it know there is fixed text to the left or right of the input

Required:

No, optional element or modifier

Comments:

--

.slds-form-element__addon
Applied to:

any element

Outcome:

Class for fixed text that sits to the left or right of an <input>

Required:

No, optional element or modifier

Comments:

--

.slds-textarea
Applied to:

<textarea>

Outcome:

Initializes textarea

Required:

Required

Comments:

--

.slds-select
Applied to:

<select>

Outcome:

Initializes select

Required:

Required

Comments:

--

.slds-checkbox
Applied to:

<label>

Outcome:

Initializes checkbox

Required:

Required

Comments:

Label wraps the faux checkbox and text, <input> requires [type=checkbox]

.slds-checkbox--faux
Applied to:

<span>

Outcome:

Creates a custom styled checkbox

Required:

Required

Comments:

Apply to <span> inside .slds-checkbox

.slds-checkbox--button-group
Applied to:

<div>

Outcome:

Container for a group of checkbox that look like a button group

Required:

No, optional element or modifier

Comments:

--

.slds-checkbox--button
Applied to:

<label class="slds-button">

Outcome:

Customizes your checkbox to look like a button in a button group

Required:

No, optional element or modifier

Comments:

--

.slds-checkbox--add-button
Applied to:

<div>

Outcome:

Customizes your checkbox to look like a plus button

Required:

No, optional element or modifier

Comments:

--

.slds-radio
Applied to:

<label>

Outcome:

Initializes radio button

Required:

Required

Comments:

Label wraps the faux radio and text, <input> requires [type=radio]

.slds-radio--faux
Applied to:

<span>

Outcome:

Creates a custom styled radio button

Required:

Required

Comments:

Apply to <span> inside .slds-radio

.slds-radio--button-group
Applied to:

<div>

Outcome:

Container for a group of radio that look like a button group

Required:

No, optional element or modifier

Comments:

--

.slds-radio--button
Applied to:

<label class="slds-button">

Outcome:

Customizes your radio to look like a button in a button group

Required:

No, optional element or modifier

Comments:

--

.slds-form--horizontal
Applied to:

<form>

Outcome:

Horizontally aligns a single form label and control on the same line

Required:

No, optional element or modifier

Comments:

--

.slds-form--stacked
Applied to:

<form>

Outcome:

Vertically aligns form label and control, provides spacing between form elements

Required:

No, optional element or modifier

Comments:

This is the default

.slds-form--inline
Applied to:

<form>

Outcome:

Horizontally align multiple form elements on the same axis

Required:

No, optional element or modifier

Comments:

--

.slds-form--compound
Applied to:

<form>

Outcome:

Creates a form that consists of multiple form groups

Required:

No, optional element or modifier

Comments:

Groups are placed in fieldsets and small labels are used for inputs

.slds-form-element__row
Applied to:

<div>

Outcome:

Use to create rows of form elements in a compound form

Required:

No, optional element or modifier

Comments:

Wrap form elements in this class

.slds-required
Applied to:

<attr>

Outcome:

Class used on required asterick

Required:

Required

Comments:

--

.slds-has-error
Applied to:

.slds-form-element

Outcome:

Applied to .slds-form-element when form element has errors

Required:

Required

Comments:

--