Text & Textarea

Use .c-txt components to style form text fields. Child component classes are shown below.

.c-txt__label .c-txt__hint .c-txt__message

Hint text may also appear below the input field.

.c-txt__label .c-txt__hint

The unmodified .c-txt occupies 100% of the width of its container. The following fields are contained by a 370px wrapper.

Using a grid layout, field labels and inputs may be positioned side-by-side.

Modifiers

Use the .c-txt--inline class modifier to layout text controls inline.

Apply a .c-txt__input--tag modifier class to inputs that are used to hold .c-tag elements.

The .c-txt__input--media modifier removes default padding and acts as a flex container for it's contents. Both start and end media are available.

Add the .c-txt__input--area modifier class to style <textarea> elements. Specify the textarea's rows attribute to control the height.

States

Types

The fields shown below demonstrate how .c-txt__input works in combination with various input types. In general, we attempt to knock out non-standard browser features (spinners, clear buttons, etc). Styling from the .c-txt__input--select dropdown modifier is added to fields that support native calendar pickers.

Playground

<form class="l-wrapper--370">
  <div class="c-txt u-mb-sm">
    <label class="c-txt__label" for="txt-playground-1">Label One</label>
    <small class="c-txt__hint">Hint text goes here...</small>
    <input class="c-txt__input c-txt__input--success" id="txt-playground-1" type="text" value="Value">
    <small class="c-txt__message c-txt__message--success">This is a good thing</small>
  </div>
  <div class="c-txt u-mb-sm">
    <label class="c-txt__label" for="txt-playground-2">Label Two</label>
    <input class="c-txt__input c-txt__input--error" id="txt-playground-2" placeholder="Placeholder" type="text">
    <small class="c-txt__message c-txt__message--error">This is a bad thing</small>
  </div>
  <div class="c-txt u-mb-sm">
    <label class="c-txt__label" for="txt-playground-3">Label Three</label>
    <div class="c-txt__input c-txt__input--tag" id="txt-playground-3" tabindex="0">
      <div class="c-tag c-tag--lg c-tag--light c-tag--pill">
        <img class="c-tag__avatar" src="http://placeskull.com/16/16/56777a">
        <span dir="ltr">A Tag</span>
        <button class="c-tag__remove" type="button" tabindex="-1"></button>
      </div>
    </div>
  </div>
  <div class="c-txt">
    <label class="c-txt__label">Media</label>
    <div class="c-txt__input c-txt__input--media">
      <div class="c-txt__input--media__figure">
        <svg>
          <use xlink:href="../../index.svg#zd-svg-icon-16-search-stroke" />
        </svg>
      </div>
      <input class="c-txt__input c-txt__input--bare c-txt__input--media__body" placeholder="c-txt__input.c-txt__input--media" type="text" />
      <div class="c-txt__input--media__figure">
        <svg>
          <use xlink:href="../../index.svg#zd-svg-icon-16-link-stroke" />
        </svg>
      </div>
    </div>
  </div>
</form>