No Preview

Sorry, but you either have no stories or none are selected somehow.

Please check the Storybook config.
Try reloading the page.

If the problem persists, check the browser console, or the terminal you've run Storybook from.

Input

Text inputs are used for freeform data entry

Input Label

Code

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

You can style the HTML <input> element to align with the Salesforce brand by using the .nds-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 .nds-form-element__label class. Instead of an <input>, use the .nds-form-element__static class inside the .nds-form-element__control wrapper.

Overview of CSS Classes

Selector	`.nds-input`
Summary	Initializes text input
Restrict	`input`

Selector	`readonly`
Summary
Restrict	`.nds-input`

Selector	`.nds-input_bare`
Summary	Removes aesthetic nature from an input
Restrict	`.nds-input, input, textarea`

Selector	`.nds-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	`.nds-input`

Selector	`:focus::-ms-input-placeholder`
Summary	Use on input container to hide placeholder when there's no focus in Microsoft Edge
Restrict

Selector	`.nds-input_borders`
Summary	Modifier to allow a [readonly] input to have borders
Restrict	`.nds-input`

Selector	`.nds-input-has-icon`
Summary	Modifier if text input has svg icon adjacent to input
Restrict	`.nds-form-element div`

Selector	`.nds-input__icon`
Summary	Hook for .nds-input-has-icon
Restrict	`.nds-input-has-icon svg, .nds-input-has-icon button, .nds-input-has-icon span`

Selector	`.nds-input-has-icon_left`
Summary	Positions .nds-input__icon to the left of the text input
Restrict	`.nds-input-has-icon`

Selector	`.nds-input-has-icon_right`
Summary	Positions .nds-input__icon to the right of the text input
Restrict	`.nds-input-has-icon`

Selector	`.nds-input-has-icon_left-right`
Summary	Positions .nds-input__icon_left to the left of the text input and .nds-input__icon_right to the right of the text input
Restrict	`.nds-input-has-icon`

Selector	`.nds-input__icon_left`
Summary	Hook for .nds-input-has-icon--left-right
Restrict	`.nds-input__icon`

Selector	`.nds-input__icon_right`
Summary	Hook for .nds-input-has-icon_left-right
Restrict	`.nds-input__icon`

Selector	`.nds-input__icon-group`
Summary	Positions two items (icons and/or spinners) on one side or the other of the input
Restrict	`.nds-input-has-icon div`

Selector	`.nds-input__icon-group_right`
Summary	Positions the close icon and spinner on the right side of the input while searching
Restrict	`.nds-input__icon-group`

Selector	`.nds-input-has-fixed-addon`
Summary	Use on input container to let it know there is fixed text to the left or right of the input
Restrict	`.nds-form-element .nds-form-element__control`

Selector	`.nds-form-element__addon`
Summary	Fixed text that sits to the left or right of an input
Restrict	`.nds-form-element span`

Selector	`.nds-form-element__static`
Summary	Initializes read-only form element
Restrict	`.nds-form-element span, .nds-form-element div`

Selector	`.nds-form-element__static_edit`
Summary	Inline Edit on static form element
Restrict	`.nds-form-element__static`