Styles text-like <input> elements in a consistent way.

  <input class="Input" type="text" value="Text">
  <input class="Input" type="text" value="Disabled" disabled>
  <input class="Input" type="search" placeholder="Search">
  <input class="Input" type="number" placeholder="Number">
  <textarea class="Input" placeholder="Textarea">The article is something you would not expect to find in an

Use the .Input--dark modifier for dark backgrounds.

Layout component for text-like <input> elements and accompanying elements like <label>, <button>, etc.

<div class="InputGroup">
  <label class="InputGroup-extra" for="demo-inputgroup-input">Search:</label>
  <input class="Input" type="text" id="demo-inputgroup-input" placeholder="Keywords...">
  <button class="Button Button--default" type="button">
    <svg viewBox="0 0 24 24" width="24" height="24" class="Icon Icon--large">
      <g fill="none" stroke="currentColor" stroke-linecap="round">
        <circle cx="9.5" cy="9.5" r="7.5" stroke-width="3" />
        <line x1="16" y1="16" x2="21" y2="21" stroke-width="4" />

Float Label

  • javascript

Labels look like placeholders when .is-empty class is applied.

<div class="FloatLabel js-FloatLabel ">
  <label class="FloatLabel-label" for="demo-floatlabel-filled-input">First name</label>
  <input class="Input " id="demo-floatlabel-filled-input" type="text"

<div class="FloatLabel js-FloatLabel ">
  <label class="FloatLabel-label" for="demo-floatlabel-empty-input">Last name</label>
  <input class="Input " id="demo-floatlabel-empty-input" type="text"

Use the .FloatLabel--dark in combination with .Input--dark on dark backgrounds.

Add js-ElasticTextarea to a <textarea> element to have it expand as the user types more than will fit.

If the rows attribute is set, it will be used as the minimum height.

<textarea class="Input js-ElasticTextarea" placeholder="Type stuff">