Text Fields

Text fields allow users to enter and edit text.

Supported Input Types

This control supports the following input types + <textarea>:

<input type="date">
<input type="datetime-local">
<input type="email">
<input type="file">
<input type="hidden">
<input type="month">
<input type="number">
<input type="password">
<input type="search">
<input type="tel">
<input type="text">
<input type="time">
<input type="url">
<input type="week">

Attributes such as disabled and readonly are also supported, but require additional classes for full styling to be applied. Review the following demos for these scenarios.

Note: For date and time related fields, review Pickers.

Basic Text Fields

The helper text is optional, but if used, note the use of aria-describedby on the input which references the id of the helper text element.

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-md-8 u-lg-6">
    <div class="u-form-control">
      <label class="u-form-label" for="standard-textfield">Standard Textfield</label>
      <input
        id="standard-textfield"
        type="text"
        class="u-textfield"
        aria-describedby="standard-textfield-helper-text"
      />
    </div>
    <p id="standard-textfield-helper-text" class="u-form-helpertext u-form-helpertext--padded">
      Helping text
    </p>

    <div class="u-form-control u-form-control__input">
      <label class="u-form-label u-form-label__input" for="outlined-textfield">
        <span class="u-form-label__label-text">Outlined Field</span>
      </label>
      <input
        id="outlined-textfield"
        type="text"
        class="u-textfield u-textfield__input u-textfield--outlined"
        aria-describedby="outlined-textfield-helper-text"
      />
    </div>
    <p id="outlined-textfield-helper-text" class="u-form-helpertext u-form-helpertext--padded">
      Helping text
    </p>

    <div class="u-form-control">
      <label class="u-form-label u-form-label--disabled" for="disabled-textfield"
        >Disabled Filled</label
      >
      <input id="disabled-textfield" type="text" class="u-textfield" disabled value="Disabled" />
    </div>
    <div class="u-form-control u-form-control__input">
      <label class="u-form-label u-form-label__input u-form-label__input--disabled" for="outlined-float">
      <span class="u-form-label__label-text">
        Disabled Outlined
      </span>
      </label>
      <input
        id="outlined-float"
        type="text"
        class="u-textfield u-textfield__input u-textfield--outlined"
        disabled
        value="Disabled"
      />
    </div>

    <div class="u-form-control u-form-control--readonly">
      <label class="u-form-label" for="standard-readonly-textfield">Readonly Standard</label>
      <input
        id="standard-readonly-textfield"
        type="text"
        value="Jane"
        readonly
        class="u-textfield"
      />
    </div>

    <div class="u-form-control u-form-control--readonly">
      <span class="u-form-label_notch">
        <label class="u-form-label" for="outlined-readonly-float"
          ><span>Readonly Outlined</span></label
        >
      </span>
      <input
        id="outlined-readonly-float"
        type="text"
        value="Jane"
        readonly
        class="u-textfield u-textfield--outlined"
      />
    </div>

  </div>
</form>

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-md-8 u-lg-6">
    <div class="u-form-control">
      <label class="u-form-label" for="standard-textfield">Standard Textfield</label>
      <input
        id="standard-textfield"
        type="text"
        class="u-textfield"
        aria-describedby="standard-textfield-helper-text"
      />
    </div>
    <p id="standard-textfield-helper-text" class="u-form-helpertext u-form-helpertext--padded">
      Helping text
    </p>

    <div class="u-form-control u-form-control__input">
      <label class="u-form-label u-form-label__input" for="outlined-textfield">
        <span class="u-form-label__label-text">Outlined Field</span>
      </label>
      <input
        id="outlined-textfield"
        type="text"
        class="u-textfield u-textfield__input u-textfield--outlined"
        aria-describedby="outlined-textfield-helper-text"
      />
    </div>
    <p id="outlined-textfield-helper-text" class="u-form-helpertext u-form-helpertext--padded">
      Helping text
    </p>

    <div class="u-form-control">
      <label class="u-form-label u-form-label--disabled" for="disabled-textfield"
        >Disabled Filled</label
      >
      <input id="disabled-textfield" type="text" class="u-textfield" disabled value="Disabled" />
    </div>
    <div class="u-form-control u-form-control__input">
      <label class="u-form-label u-form-label__input u-form-label__input--disabled" for="outlined-float">
      <span class="u-form-label__label-text">
        Disabled Outlined
      </span>
      </label>
      <input
        id="outlined-float"
        type="text"
        class="u-textfield u-textfield__input u-textfield--outlined"
        disabled
        value="Disabled"
      />
    </div>

    <div class="u-form-control u-form-control--readonly">
      <label class="u-form-label" for="standard-readonly-textfield">Readonly Standard</label>
      <input
        id="standard-readonly-textfield"
        type="text"
        value="Jane"
        readonly
        class="u-textfield"
      />
    </div>

    <div class="u-form-control u-form-control--readonly">
      <span class="u-form-label_notch">
        <label class="u-form-label" for="outlined-readonly-float"
          ><span>Readonly Outlined</span></label
        >
      </span>
      <input
        id="outlined-readonly-float"
        type="text"
        value="Jane"
        readonly
        class="u-textfield u-textfield--outlined"
      />
    </div>

  </div>
</form>

Textareas

Textareas require that the following classes be placed on a wrapping div:

.u-textfield .u-textfield--textarea

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-md-8 u-lg-6">
    <div class="u-form-control u-form-control--fullwidth">
      <label class="u-form-label" for="standard-textarea">Standard Textarea</label>
      <div class="u-textfield u-textfield--textarea">
        <textarea
          id="standard-textarea"
          aria-describedby="standard-textarea-helper-text"
        ></textarea>
        <span class="u-textarea-focus"></span>
      </div>
    </div>
    <p id="standard-textarea-helper-text" class="u-form-helpertext u-form-helpertext--padded">
      Helping text
    </p>

    <div class="u-form-control u-form-control--fullwidth u-mt-xs-4">
      <span class="u-form-label_notch">
        <label class="u-form-label" for="textarea-outlined"><span>Textarea Outlined</span></label>
      </span>
      <div class="u-textfield u-textfield--textarea u-textfield--outlined ">
        <textarea
          id="textarea-outlined"
          aria-describedby="outlined-textarea-helper-text"
        ></textarea>
        <span class="u-textarea-focus"></span>
      </div>
    </div>
    <p id="outlined-textarea-helper-text" class="u-form-helpertext u-form-helpertext--padded">
      Helping text
    </p>

    <div class="u-form-control u-form-control--fullwidth u-mt-xs-4">
      <label class="u-form-label u-form-label--disabled" for="standard-textarea-disabled"
        >Textarea Disabled</label
      >
      <div class="u-textfield u-textfield--textarea u-textfield--textarea-disabled">
        <textarea id="standard-textarea-disabled" disabled></textarea>
        <span class="u-textarea-focus"></span>
      </div>
    </div>
    <div class="u-form-control u-form-control--fullwidth">
      <span class="u-form-label_notch u-form-label_notch--disabled">
        <label class="u-form-label" for="textarea-outlined-disabled"
          ><span>Textarea Disabled</span></label
        >
      </span>
      <div
        class="u-textfield u-textfield--textarea u-textfield--outlined u-textfield--textarea-disabled"
      >
        <textarea id="textarea-outlined-disabled" disabled>
A long value that extends beyond the default viewable area of the natively rendered textarea</textarea
        >
        <span class="u-textarea-focus"></span>
      </div>
    </div>

    <div class="u-form-control u-form-control--fullwidth u-form-control--readonly">
      <label class="u-form-label" for="standard-readonly-textarea">Readonly Standard</label>
      <div class="u-textfield u-textfield--textarea">
        <textarea id="standard-readonly-textarea" readonly="readonly">Here be dragons.</textarea>
        <span class="u-textarea-focus"></span>
      </div>
    </div>
    <div class="u-form-control u-form-control--fullwidth u-form-control--readonly">
      <span class="u-form-label_notch">
        <label class="u-form-label" for="textarea-readonly-outlined"
          ><span>Readonly Outlined</span></label
        >
      </span>
      <div class="u-textfield u-textfield--textarea u-textfield--outlined ">
        <textarea id="textarea-readonly-outlined" readonly="readonly">Here be dragons.</textarea>
        <span class="u-textarea-focus"></span>
      </div>
    </div>
  </div>
</form>

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-md-8 u-lg-6">
    <div class="u-form-control u-form-control--fullwidth">
      <label class="u-form-label" for="standard-textarea">Standard Textarea</label>
      <div class="u-textfield u-textfield--textarea">
        <textarea
          id="standard-textarea"
          aria-describedby="standard-textarea-helper-text"
        ></textarea>
        <span class="u-textarea-focus"></span>
      </div>
    </div>
    <p id="standard-textarea-helper-text" class="u-form-helpertext u-form-helpertext--padded">
      Helping text
    </p>

    <div class="u-form-control u-form-control--fullwidth u-mt-xs-4">
      <span class="u-form-label_notch">
        <label class="u-form-label" for="textarea-outlined"><span>Textarea Outlined</span></label>
      </span>
      <div class="u-textfield u-textfield--textarea u-textfield--outlined ">
        <textarea
          id="textarea-outlined"
          aria-describedby="outlined-textarea-helper-text"
        ></textarea>
        <span class="u-textarea-focus"></span>
      </div>
    </div>
    <p id="outlined-textarea-helper-text" class="u-form-helpertext u-form-helpertext--padded">
      Helping text
    </p>

    <div class="u-form-control u-form-control--fullwidth u-mt-xs-4">
      <label class="u-form-label u-form-label--disabled" for="standard-textarea-disabled"
        >Textarea Disabled</label
      >
      <div class="u-textfield u-textfield--textarea u-textfield--textarea-disabled">
        <textarea id="standard-textarea-disabled" disabled></textarea>
        <span class="u-textarea-focus"></span>
      </div>
    </div>
    <div class="u-form-control u-form-control--fullwidth">
      <span class="u-form-label_notch u-form-label_notch--disabled">
        <label class="u-form-label" for="textarea-outlined-disabled"
          ><span>Textarea Disabled</span></label
        >
      </span>
      <div
        class="u-textfield u-textfield--textarea u-textfield--outlined u-textfield--textarea-disabled"
      >
        <textarea id="textarea-outlined-disabled" disabled>
A long value that extends beyond the default viewable area of the natively rendered textarea</textarea
        >
        <span class="u-textarea-focus"></span>
      </div>
    </div>

    <div class="u-form-control u-form-control--fullwidth u-form-control--readonly">
      <label class="u-form-label" for="standard-readonly-textarea">Readonly Standard</label>
      <div class="u-textfield u-textfield--textarea">
        <textarea id="standard-readonly-textarea" readonly="readonly">Here be dragons.</textarea>
        <span class="u-textarea-focus"></span>
      </div>
    </div>
    <div class="u-form-control u-form-control--fullwidth u-form-control--readonly">
      <span class="u-form-label_notch">
        <label class="u-form-label" for="textarea-readonly-outlined"
          ><span>Readonly Outlined</span></label
        >
      </span>
      <div class="u-textfield u-textfield--textarea u-textfield--outlined ">
        <textarea id="textarea-readonly-outlined" readonly="readonly">Here be dragons.</textarea>
        <span class="u-textarea-focus"></span>
      </div>
    </div>
  </div>
</form>

Input Types

Showcasing a few common types of input fields, review the supported input types.

Note: Review browser support before choosing a native HTML5 input type without backup masking or validation.

<form class="u-layout-constrained">
  <div class="u-grid-container u-grid-spacing--4 u-grid-justify--center u-grid-alignitems--end">
    <div class="u-grid-item u-md-auto">
      <div class="u-form-control">
        <label class="u-form-label" for="standard-password">Password</label>
        <input id="standard-password" type="password" class="u-textfield" />
      </div>
    </div>
    <div class="u-grid-item u-md-auto">
      <div class="u-form-control u-form-control__input">
        <label class="u-form-label u-form-label__input" for="outlined-password">
          <span class="u-form-label__label-text">Password</span>
        </label>
        <input id="outlined-password" type="password" class="u-textfield u-textfield__input u-textfield--outlined" />
      </div>
    </div>
  </div>
  <div class="u-grid-container u-grid-spacing--4 u-grid-justify--center u-grid-alignitems--end">
    <div class="u-grid-item u-md-auto">
      <div class="u-form-control">
        <label class="u-form-label" for="standard-number">Number</label>
        <input id="standard-number" type="number" class="u-textfield" />
      </div>
    </div>
    <div class="u-grid-item u-md-auto">
      <div class="u-form-control u-form-control__input">
        <label class="u-form-label u-form-label__input" for="outlined-number">
          <span class="u-form-label__label-text">Number</span>
        </label>
        <input id="outlined-number" type="number" class="u-textfield u-textfield__input u-textfield--outlined" />
      </div>
    </div>
  </div>
  <div class="u-grid-container u-grid-spacing--4 u-grid-justify--center u-grid-alignitems--end">
    <div class="u-grid-item u-md-5">
      <div class="u-form-control">
        <label class="u-form-label" for="standard-file">File</label>
        <input id="standard-file" type="file" class="u-textfield" />
      </div>
    </div>
    <div class="u-grid-item u-md-5">
      <div class="u-form-control u-form-control__input">
        <label class="u-form-label u-form-label__input" for="outlined-file">
          <span class="u-form-label__label-text">File</span>
        </label>
        <input id="outlined-file" type="file" class="u-textfield u-textfield__input u-textfield--outlined" />
      </div>
    </div>
  </div>
</form>

<form class="u-layout-constrained">
  <div class="u-grid-container u-grid-spacing--4 u-grid-justify--center u-grid-alignitems--end">
    <div class="u-grid-item u-md-auto">
      <div class="u-form-control">
        <label class="u-form-label" for="standard-password">Password</label>
        <input id="standard-password" type="password" class="u-textfield" />
      </div>
    </div>
    <div class="u-grid-item u-md-auto">
      <div class="u-form-control u-form-control__input">
        <label class="u-form-label u-form-label__input" for="outlined-password">
          <span class="u-form-label__label-text">Password</span>
        </label>
        <input id="outlined-password" type="password" class="u-textfield u-textfield__input u-textfield--outlined" />
      </div>
    </div>
  </div>
  <div class="u-grid-container u-grid-spacing--4 u-grid-justify--center u-grid-alignitems--end">
    <div class="u-grid-item u-md-auto">
      <div class="u-form-control">
        <label class="u-form-label" for="standard-number">Number</label>
        <input id="standard-number" type="number" class="u-textfield" />
      </div>
    </div>
    <div class="u-grid-item u-md-auto">
      <div class="u-form-control u-form-control__input">
        <label class="u-form-label u-form-label__input" for="outlined-number">
          <span class="u-form-label__label-text">Number</span>
        </label>
        <input id="outlined-number" type="number" class="u-textfield u-textfield__input u-textfield--outlined" />
      </div>
    </div>
  </div>
  <div class="u-grid-container u-grid-spacing--4 u-grid-justify--center u-grid-alignitems--end">
    <div class="u-grid-item u-md-5">
      <div class="u-form-control">
        <label class="u-form-label" for="standard-file">File</label>
        <input id="standard-file" type="file" class="u-textfield" />
      </div>
    </div>
    <div class="u-grid-item u-md-5">
      <div class="u-form-control u-form-control__input">
        <label class="u-form-label u-form-label__input" for="outlined-file">
          <span class="u-form-label__label-text">File</span>
        </label>
        <input id="outlined-file" type="file" class="u-textfield u-textfield__input u-textfield--outlined" />
      </div>
    </div>
  </div>
</form>

Input Adornments

An input adornment can be used to add a prefix, a suffix or an action to an input.

<form class="u-layout-constrained">
  <div class="u-grid-container u-grid-spacing--4 u-grid-alignitems--end">
    <div class="u-grid-item u-md-6">
      <div class="u-form-control u-form-control--adornment--start">
        <label id="sa-label" class="u-form-label" for="start-adornment">Start Adornment</label>
        <span id="sa-adornment" class="u-input-adornment" aria-label="in Kg">Kg</span>
        <input
          id="start-adornment"
          aria-labelledby="sa-label sa-adornment"
          type="text"
          class="u-textfield"
        />
      </div>
    </div>
    <div class="u-grid-item u-md-6">
      <div class="u-form-control u-form-control__input u-form-control--adornment--end u-form-control--adornment--end--action">
        <label class="u-form-label u-form-label__input" for="end-adornment">
          <span class="u-form-label__label-text">End Adornment</span>
        </label>
        <input id="end-adornment" type="text" class="u-textfield u-textfield__input u-textfield--outlined" />
        <button aria-label="Search" class="u-input-adornment u-icon-button" type="button">
          <svg focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation">
            <path
              d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
            ></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <div class="u-grid-container u-grid-spacing--4 u-grid-alignitems--end">
    <div class="u-grid-item u-md-6">
      <div
        class="u-form-control u-form-control--fullwidth u-form-control--adornment--start u-form-control--adornment--1ch"
      >
        <label class="u-form-label" for="start-select">Select Adornment Start</label>
        <span class="u-input-adornment">$</span>
        <div class="u-select">
          <select id="start-select" aria-label="dollars">
            <option value="">5,000</option>
            <option value="">10,000</option>
          </select>
          <span class="u-select__focus"></span>
        </div>
      </div>
    </div>
    <div class="u-grid-item u-md-6">
      <div class="u-form-control u-form-control__input u-form-control--fullwidth u-form-control--adornment--end">
        <label class="u-form-label u-form-label__input" for="end-select">
          <span class="u-form-label__label-text">Select Adornment End</span>
        </label>
        <div class="u-select u-select--outlined u-textfield__input">
          <select id="end-select" aria-label="alarm">
            <option value="">6:00 AM</option>
            <option value="">10:00 AM</option>
          </select>
          <span class="u-select__focus"></span>
        </div>
        <span class="u-input-adornment u-input-adornment--icon"
          ><svg focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation">
            <path
              d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
            />
            <path d="M0 0h24v24H0z" fill="none" />
            <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z" /></svg
        ></span>
      </div>
    </div>
  </div>
</form>

<form class="u-layout-constrained">
  <div class="u-grid-container u-grid-spacing--4 u-grid-alignitems--end">
    <div class="u-grid-item u-md-6">
      <div class="u-form-control u-form-control--adornment--start">
        <label id="sa-label" class="u-form-label" for="start-adornment">Start Adornment</label>
        <span id="sa-adornment" class="u-input-adornment" aria-label="in Kg">Kg</span>
        <input
          id="start-adornment"
          aria-labelledby="sa-label sa-adornment"
          type="text"
          class="u-textfield"
        />
      </div>
    </div>
    <div class="u-grid-item u-md-6">
      <div class="u-form-control u-form-control__input u-form-control--adornment--end u-form-control--adornment--end--action">
        <label class="u-form-label u-form-label__input" for="end-adornment">
          <span class="u-form-label__label-text">End Adornment</span>
        </label>
        <input id="end-adornment" type="text" class="u-textfield u-textfield__input u-textfield--outlined" />
        <button aria-label="Search" class="u-input-adornment u-icon-button" type="button">
          <svg focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation">
            <path
              d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"
            ></path>
          </svg>
        </button>
      </div>
    </div>
  </div>
  <div class="u-grid-container u-grid-spacing--4 u-grid-alignitems--end">
    <div class="u-grid-item u-md-6">
      <div
        class="u-form-control u-form-control--fullwidth u-form-control--adornment--start u-form-control--adornment--1ch"
      >
        <label class="u-form-label" for="start-select">Select Adornment Start</label>
        <span class="u-input-adornment">$</span>
        <div class="u-select">
          <select id="start-select" aria-label="dollars">
            <option value="">5,000</option>
            <option value="">10,000</option>
          </select>
          <span class="u-select__focus"></span>
        </div>
      </div>
    </div>
    <div class="u-grid-item u-md-6">
      <div class="u-form-control u-form-control__input u-form-control--fullwidth u-form-control--adornment--end">
        <label class="u-form-label u-form-label__input" for="end-select">
          <span class="u-form-label__label-text">Select Adornment End</span>
        </label>
        <div class="u-select u-select--outlined u-textfield__input">
          <select id="end-select" aria-label="alarm">
            <option value="">6:00 AM</option>
            <option value="">10:00 AM</option>
          </select>
          <span class="u-select__focus"></span>
        </div>
        <span class="u-input-adornment u-input-adornment--icon"
          ><svg focusable="false" viewBox="0 0 24 24" aria-hidden="true" role="presentation">
            <path
              d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2zM12 20c-4.42 0-8-3.58-8-8s3.58-8 8-8 8 3.58 8 8-3.58 8-8 8z"
            />
            <path d="M0 0h24v24H0z" fill="none" />
            <path d="M12.5 7H11v6l5.25 3.15.75-1.23-4.5-2.67z" /></svg
        ></span>
      </div>
    </div>
  </div>
</form>

Error State

To display field in an error state, add .u-form-control--invalid to the .u-form-control element, and .u-form-helpertext--invalid to the helper text element (if in use).

Note: Implementation of validation logic is up to the application.

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-md-8 u-lg-6">
    <div class="u-form-control u-form-control--invalid">
      <label class="u-form-label" for="invalid-textfield">Error Textfield</label>
      <input
        id="invalid-textfield"
        type="text"
        class="u-textfield"
        aria-describedby="invalid-textfield-helper-text"
      />
    </div>
    <p
      id="invalid-textfield-helper-text"
      class="u-form-helpertext u-form-helpertext--padded u-form-helpertext--invalid"
    >
      Helping text
    </p>

    <div class="u-form-control u-form-control__input u-form-control--invalid">
      <label class="u-form-label u-form-label__input" for="outlined-textfield">
        <span class="u-form-label__label-text">Invalid Outlined</span>
      </label>
      <input
        id="outlined-textfield"
        type="text"
        class="u-textfield u-textfield__input u-textfield--outlined"
        aria-describedby="invalid-outlined-textfield-helper-text"
      />
    </div>
    <p
      id="invalid-outlined-textfield-helper-text"
      class="u-form-helpertext u-form-helpertext--padded u-form-helpertext--invalid"
    >
      Helping text
    </p>

    <div class="u-form-control u-form-control--fullwidth u-form-control--invalid u-mt-xs-4">
      <label class="u-form-label" for="invalid-textarea">Error Textarea</label>
      <div class="u-textfield u-textfield--textarea">
        <textarea id="invalid-textarea" aria-describedby="invalid-textarea-helper-text"></textarea>
        <span class="u-textarea-focus"></span>
      </div>
    </div>
    <p
      id="invalid-textarea-helper-text"
      class="u-form-helpertext u-form-helpertext--padded u-form-helpertext--invalid"
    >
      Helping text
    </p>

    <div class="u-form-control u-form-control--fullwidth u-form-control--invalid u-mt-xs-4">
      <span class="u-form-label_notch">
        <label class="u-form-label" for="invalid-textarea-outlined-"
          ><span>Error Textarea Outlined</span></label
        >
      </span>
      <div class="u-textfield u-textfield--textarea u-textfield--outlined ">
        <textarea
          id="invalid-textarea-outlined"
          aria-describedby="invalid-textarea-outlined-helper-text"
        ></textarea>
        <span class="u-textarea-focus"></span>
      </div>
    </div>
    <p
      id="invalid-textarea-outlined-helper-text"
      class="u-form-helpertext u-form-helpertext--padded u-form-helpertext--invalid"
    >
      Helping text
    </p>
  </div>
</form>

<form class="u-grid-container u-grid-justify--center">
  <div class="u-grid-item u-md-8 u-lg-6">
    <div class="u-form-control u-form-control--invalid">
      <label class="u-form-label" for="invalid-textfield">Error Textfield</label>
      <input
        id="invalid-textfield"
        type="text"
        class="u-textfield"
        aria-describedby="invalid-textfield-helper-text"
      />
    </div>
    <p
      id="invalid-textfield-helper-text"
      class="u-form-helpertext u-form-helpertext--padded u-form-helpertext--invalid"
    >
      Helping text
    </p>

    <div class="u-form-control u-form-control__input u-form-control--invalid">
      <label class="u-form-label u-form-label__input" for="outlined-textfield">
        <span class="u-form-label__label-text">Invalid Outlined</span>
      </label>
      <input
        id="outlined-textfield"
        type="text"
        class="u-textfield u-textfield__input u-textfield--outlined"
        aria-describedby="invalid-outlined-textfield-helper-text"
      />
    </div>
    <p
      id="invalid-outlined-textfield-helper-text"
      class="u-form-helpertext u-form-helpertext--padded u-form-helpertext--invalid"
    >
      Helping text
    </p>

    <div class="u-form-control u-form-control--fullwidth u-form-control--invalid u-mt-xs-4">
      <label class="u-form-label" for="invalid-textarea">Error Textarea</label>
      <div class="u-textfield u-textfield--textarea">
        <textarea id="invalid-textarea" aria-describedby="invalid-textarea-helper-text"></textarea>
        <span class="u-textarea-focus"></span>
      </div>
    </div>
    <p
      id="invalid-textarea-helper-text"
      class="u-form-helpertext u-form-helpertext--padded u-form-helpertext--invalid"
    >
      Helping text
    </p>

    <div class="u-form-control u-form-control--fullwidth u-form-control--invalid u-mt-xs-4">
      <span class="u-form-label_notch">
        <label class="u-form-label" for="invalid-textarea-outlined-"
          ><span>Error Textarea Outlined</span></label
        >
      </span>
      <div class="u-textfield u-textfield--textarea u-textfield--outlined ">
        <textarea
          id="invalid-textarea-outlined"
          aria-describedby="invalid-textarea-outlined-helper-text"
        ></textarea>
        <span class="u-textarea-focus"></span>
      </div>
    </div>
    <p
      id="invalid-textarea-outlined-helper-text"
      class="u-form-helpertext u-form-helpertext--padded u-form-helpertext--invalid"
    >
      Helping text
    </p>
  </div>
</form>

Text Fields

Supported Input Types

Basic Text Fields

Textareas

Input Types

Input Adornments

Error State

Properties

<TextField />

<FormControl />

<FormHelperText />

<InputAdornment />