Theme: Light | Lightest | Dark | Darkest Scale: Medium | Large

Decorated Text Field

Usage notes

Decorated text fields are used to display a text field with an embedded button, icon or both.

Icon Only


        <label class="coral-DecoratedTextfield">
          <coral-icon class="coral-DecoratedTextfield-icon" icon="search" size="XS" title="Search"></coral-icon>
          <input is="coral-textfield" class="coral-DecoratedTextfield-input">
        </label>

Button Only

Toggle markup


        <span class="coral-DecoratedTextfield">
          <input is="coral-textfield" class="coral-DecoratedTextfield-input" aria-label="input">
          <button is="coral-button" variant="minimal" icon="close" iconsize="XS" class="coral-DecoratedTextfield-button" aria-label="Clear input" title="Clear input"></button>
        </span>

Icon and Button

Toggle markup


        <span class="coral-DecoratedTextfield">
          <label>
            <coral-icon class="coral-DecoratedTextfield-icon" icon="search" size="XS" title="Search"></coral-icon>
            <input is="coral-textfield" class="coral-DecoratedTextfield-input">
          </label>
          <button is="coral-button" variant="minimal" icon="close" iconsize="XS" class="coral-DecoratedTextfield-button" aria-label="Clear search" title="Clear search"></button>
        </span>