---
layout      : 'default'
css         : 'input'
title       : 'Input'
description : 'Inputs allow a user to enter information'
type        : 'UI Element'
---

<%- @partial('header') %>

<div class="main container">

  <div class="peek">
    <div class="ui vertical pointing secondary menu">
      <a class="active item">Types</a>
      <a class="item">States</a>
      <a class="item">Variations</a>
    </div>
  </div>
  <h2 class="ui dividing header">Types</h2>

  <div class="example">
    <h4 class="ui header">Input</h4>
    <p>A standard input</p>
    <div class="ui input">
      <input type="text" placeholder="Search...">
    </div>
  </div>

  <h2 class="ui dividing header">States</h2>

  <div class="example">
    <h4 class="ui header">Focus</h4>
    <p>An input field can show a user is currently interacting with it</p>
    <div class="ui input focus">
      <input type="text" placeholder="Search...">
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Loading</h4>
    <p>An icon input field can show that it is currently loading data</p>
    <div class="ui icon input loading">
      <input type="text" placeholder="Search...">
      <i class="icon"></i>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Error</h4>
    <p>An input field can show the data contains errors</p>
    <div class="ui input error" placeholder="Search...">
      <input type="text">
    </div>
  </div>

  <h2 class="ui dividing header">Variations</h2>

  <div class="example">
    <h4 class="ui header">Icon</h4>
    <p>An input can be formatted with an icon</p>
    <div class="ui icon input">
      <input type="text" placeholder="Search...">
      <i class="search icon"></i>
    </div>
  </div>
  <div class="another example">
    <div class="ui left icon input">
      <input type="text" placeholder="Search users...">
      <i class="users icon"></i>
    </div>
  </div>
  <div class="another example">
    <div class="ui icon input">
      <input type="text" placeholder="Search...">
      <i class="circular search icon"></i>
    </div>
  </div>
  <div class="another example">
    <div class="ui icon input">
      <input type="text" placeholder="Search...">
      <i class="inverted search icon"></i>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Labeled</h4>
    <p>An input can be formatted with a label</p>
    <div class="ui labeled input">
      <input type="text" placeholder="Search...">
      <div class="ui corner label">
        <i class="asterisk icon"></i>
      </div>
    </div>
    <br><br>
    <div class="ui labeled input">
      <input type="text" placeholder="Search...">
      <div class="ui corner label">
        <div class="text">New</div>
      </div>
    </div>

  </div>

  <div class="example">
    <h4 class="ui header">Action</h4>
    <p>An input can be formatted to alert the user to an action they may perform</p>
    <div class="ui action input">
      <input type="text" placeholder="Search...">
      <div class="ui button">Search</div>
    </div>
  </div>
  <div class="another example">
    <div class="ui action input">
      <input type="text" placeholder="Username">
      <div class="ui teal button"><i class="user icon"></i> Add users</div>
    </div>
  </div>
  <div class="another example">
    <div class="ui action input">
      <input type="text" placeholder="Search...">
      <div class="ui icon button"><i class="search icon"></i></div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Fluid</h4>
    <p>An input can take the size of its container</p>
    <div class="ui fluid icon input">
      <input type="text" placeholder="Search a very wide input...">
      <i class="search icon"></i>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Size</h4>
    <p>An input can vary in size</p>
    <div class="ui mini icon input">
      <input type="text" placeholder="Search mini...">
      <i class="search icon"></i>
    </div>
  </div>
  <div class="another example">
    <div class="ui small icon input">
      <input type="text" placeholder="Search small...">
      <i class="search icon"></i>
    </div>
  </div>
  <div class="another example">
    <div class="ui large icon input">
      <input type="text" placeholder="Search large...">
      <i class="search icon"></i>
    </div>
  </div>
  <div class="another example">
    <div class="ui big icon input">
      <input type="text" placeholder="Search big...">
      <i class="search icon"></i>
    </div>
  </div>
  <div class="another example">
    <div class="ui huge icon input">
      <input type="text" placeholder="Search huge...">
      <i class="search icon"></i>
    </div>
  </div>
  <div class="another example">
    <div class="ui massive icon input">
      <input type="text" placeholder="Search massive...">
      <i class="search icon"></i>
    </div>
  </div>

</div>