Input

Base

<p><input type="text" placeholder="input here..." /></p>
<p><textarea cols="100" rows="5" placeholder="input here..."></textarea></p>

Fluid

<p><input type="text" class="fluid" placeholder="input here..." /></p>
<p>
  <textarea
    cols="120"
    rows="5"
    class="fluid"
    placeholder="input here..."
  ></textarea>
</p>

Disabled state

<p>
  <input
    type="text"
    placeholder="Disabled input here..."
    disabled="disabled"
    class="fluid"
  />
</p>
<p>
  <input
    type="text"
    placeholder="Disabled input here..."
    disabled="disabled"
    class="fluid primary"
  />
</p>

Sizing

<p><input type="text" class="small" placeholder=".small input" /></p>
<p><input type="text" placeholder="default input" /></p>
<p><input type="text" class="large" placeholder=".large input" /></p>

Color

<p><input type="text" class="fluid primary" placeholder=".primary" /></p>
<p><input type="text" class="fluid success" placeholder=".success" /></p>
<p><input type="text" class="fluid info" placeholder=".info" /></p>
<p><input type="text" class="fluid warning" placeholder=".warning" /></p>
<p><input type="text" class="fluid danger" placeholder=".danger" /></p>
<p>
  <textarea
    cols="120"
    rows="5"
    class="fluid primary"
    placeholder=".primary"
  ></textarea>
</p>

Input groups

@

.00

<div class="inputs">
  <span class="addon">@</span>
  <input type="text" placeholder="Username" />
</div>
<br />
<div class="inputs">
  <input type="text" />
  <span class="addon">.00</span>
</div>

Checkboxes and radio addons

Place any checkbox or radio option within an input group's addon instead of text.

<div class="grid two">
  <div class="column">
    <div class="inputs">
      <span class="addon"><input type="checkbox" /></span>
      <input type="text" />
    </div>
  </div>
  <div class="column">
    <div class="inputs">
      <span class="addon"><input type="radio" /></span>
      <input type="text" />
    </div>
  </div>
</div>

Button addons

Go!

Go!

<div class="grid two">
  <div class="column">
    <div class="inputs">
      <span class="buttons">
        <button class="button" type="button">Go!</button>
      </span>
      <input type="text" />
    </div>
  </div>
  <div class="column">
    <div class="inputs">
      <input type="text" />
      <span class="buttons">
        <button class="button" type="button">Go!</button>
      </span>
    </div>
  </div>
</div>

Email autocomplete

<p><input type="email" placeholder="Enter email..." /></p>