Input

Base

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

Fluid

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

Disabled state

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

Sizing

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

Color

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

Input groups

@

.00

<div class="inputs">
  <span class="addon">@</span>
  <input type="text" />
</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