Text Field - Decorated

Component status
Contribution
Last releasedOctober 8, 2019
Current version@spectrum-css/decoratedtextfield@2.0.0

Usage notes#


A Spectrum text field with an additional icon. The icon must be the Small size (18px) in order for it to be positioned correctly.

Variants#


Standard#
Contribution

<div class="spectrum-DecoratedTextfield is-decorated">
  <label for="DecoratedTextField-single" class="spectrum-FieldLabel">Search</label>

  <input id="DecoratedTextField-single" placeholder="Enter your name" class="spectrum-Textfield spectrum-DecoratedTextfield-field" aria-invalid="false" type="text">

  <svg class="spectrum-Icon spectrum-UIIcon-InfoMedium spectrum-Icon--sizeS spectrum-DecoratedTextfield-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-InfoMedium" />
  </svg>
</div>
Show markup

Multiline#
Contribution

<div class="spectrum-DecoratedTextfield is-decorated">
  <label for="DecoratedTextField-multiline" class="spectrum-FieldLabel spectrum-FieldLabel--left">Search</label>

  <textarea id="DecoratedTextField-multiline" placeholder="Enter your life story" name="field" value="" class="spectrum-Textfield spectrum-Textfield--multiline spectrum-DecoratedTextfield-field"></textarea>

  <svg class="spectrum-Icon spectrum-UIIcon-InfoMedium spectrum-Icon--sizeS spectrum-DecoratedTextfield-icon" focusable="false" aria-hidden="true">
    <use xlink:href="#spectrum-css-icon-InfoMedium" />
  </svg>
</div>
Show markup