Input

The Input component is used to create single-line text input fields for forms. It supports text, email, and search input types, and includes built-in support for labels, error states, and faux-placeholder animations.

Attributes

Attribute	Description
`error`	Sets an error state. Accepts a boolean, defaults to false.
`field-id`	Sets a value in the id and for attributes to pair labels and inputs. Accepts a string, defaults to null.
`classes`	Adds additional classes. Accepts a string of classes separated by spaces, defaults to null.
`label`	The label text. Accepts a string, defaults to null.
`message`	An error message. Accepts a string, defaults to null.
`placeholder`	The example placeholder text that displays in the input. Accepts a string, defaults to null.
`required`	Specifies when a field is required. Accepts a boolean, defaults to null.
`type`	Sets the type of the input. Accepts the types text, email, or search, defaults to text.
`value`	Sets a default input value in the field. Accepts a string, defaults to null.

Accessibility Guidelines

All inputs must have an associated label element with a matching for attribute
The for attribute must match the id of the input element
Required inputs should use the required attribute
Inputs with errors should include aria-invalid="true" and aria-describedby attributes pointing to the error message
Use appropriate input types (text, email, search) for better mobile keyboard support

Variations

Text Input

The standard text input field with a label positioned above the input. The input uses the cmp-form-field__input class.

Text Field

<div class="cmp-form-field">
  <label for="text-field-default" class="cmp-form-label">Text Field</label>
  <div class="cmp-form-field--required">
    <div class="util-position-relative">
      <input
        id="text-field-default"
        class="cmp-form-field__input"
        type="text"
        placeholder="Placeholder Text"
        required
      />
    </div>
  </div>
</div>

Text Input with Error

Inputs can display an error state with a red border and error message below the field by adding the cmp-form-field__input--error class to the input.

Text Field

This is an error message.

<div class="cmp-form-field">
  <label for="text-field-error" class="cmp-form-label cmp-form-label--error">
    Text Field
  </label>
  <div class="cmp-form-field--required">
    <div class="util-position-relative">
      <input
        id="text-field-error"
        class="cmp-form-field__input cmp-form-field__input--error"
        type="text"
        placeholder="Placeholder Text"
        required
        aria-describedby="error-message-text-1"
        aria-invalid="true"
      />
    </div>
  </div>
  <p id="error-message-text-1" class="cmp-form__error-message">
    This is an error message.
  </p>
</div>

Text Input with Faux-Placeholder

The faux-placeholder variation creates an animated label that behaves like a placeholder, moving out of the way when the input is focused or has a value. The label is positioned inside the input and animates to the top-left when interacted with. Add the cmp-form-field__input--faux-placeholder class to the input.

Text Field

<div class="cmp-form-field">
  <div class="cmp-form-field--required">
    <div class="util-position-relative">
      <input
        id="text-field-faux"
        class="cmp-form-field__input cmp-form-field__input--faux-placeholder"
        type="text"
        placeholder=" "
        required
      />
      <label
        for="text-field-faux"
        class="cmp-form-label cmp-form-label--faux-placeholder"
      >
        Text Field
      </label>
    </div>
  </div>
</div>

Input Types

Email Input

Email inputs use type="email" to provide appropriate validation and mobile keyboard support. The cmp-form-field__input class is applied with the cmp-form-field__input--faux-placeholder modifier.

Email Field

Invalid email address.

<div class="cmp-form-field">
  <div class="cmp-form-field--required">
    <div class="util-position-relative">
      <input
        id="email-field"
        class="cmp-form-field__input cmp-form-field__input--faux-placeholder"
        type="email"
        placeholder=" "
        required
      />
      <label
        for="email-field"
        class="cmp-form-label cmp-form-label--faux-placeholder"
      >
        Email Field
      </label>
    </div>
  </div>
</div>
<div class="cmp-form-field">
  <div class="cmp-form-field--required">
    <div class="util-position-relative">
      <input
        id="email-field-error"
        class="cmp-form-field__input cmp-form-field__input--faux-placeholder cmp-form-field__input--error"
        type="email"
        placeholder=" "
        required
        aria-describedby="error-message-email-1"
        aria-invalid="true"
      />
      <label
        for="email-field-error"
        class="cmp-form-label cmp-form-label--error cmp-form-label--faux-placeholder"
      >
        Email Field
      </label>
    </div>
  </div>
  <p id="error-message-email-1" class="cmp-form__error-message">
    Invalid email address.
  </p>
</div>

Search Input

Search inputs use type="search" to provide search-specific styling and functionality. The cmp-form-field__input class is applied with the cmp-form-field__input--faux-placeholder modifier.

Search Field

No results found.

<div class="cmp-form-field">
  <div class="cmp-form-field--required">
    <div class="util-position-relative">
      <input
        id="search-field"
        class="cmp-form-field__input cmp-form-field__input--faux-placeholder"
        type="search"
        placeholder=" "
        required
      />
      <label
        for="search-field"
        class="cmp-form-label cmp-form-label--faux-placeholder"
      >
        Search Field
      </label>
    </div>
  </div>
</div>
<div class="cmp-form-field">
  <div class="cmp-form-field--required">
    <div class="util-position-relative">
      <input
        id="search-field-error"
        class="cmp-form-field__input cmp-form-field__input--faux-placeholder cmp-form-field__input--error"
        type="search"
        placeholder=" "
        required
        aria-describedby="error-message-search-1"
        aria-invalid="true"
      />
      <label
        for="search-field-error"
        class="cmp-form-label cmp-form-label--error cmp-form-label--faux-placeholder"
      >
        Search Field
      </label>
    </div>
  </div>
  <p id="error-message-search-1" class="cmp-form__error-message">
    No results found.
  </p>
</div>