SemanSemantic-UItic-UI/server/documents/elements/input.html.eco

---
layout      : 'default'
css         : 'input'

element     : 'input'
elementType : 'element'

title       : 'Input'
description : 'An input is a field used to elicit a response from a user'
type        : 'UI Element'

themes      : ['Default']
---

<%- @partial('header') %>
<link rel="stylesheet/less" type="text/css" href="/build/less/definitions/elements/input.less" />

<div class="main container">

  <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 corner labeled input">
      <input type="text" placeholder="Search...">
      <div class="ui corner label">
        <i class="asterisk icon"></i>
      </div>
    </div>
  </div>
  <div class="another example">
    <div class="ui labeled input">
      <div class="ui label">
        http://
      </div>
      <input type="text" placeholder="mysite.com">
    </div>
  </div>
  <div class="another example">
    <div class="ui right labeled left icon input">
      <i class="tags icon"></i>
      <input type="text" placeholder="Enter categories">
      <div class="ui tag label">
        Tags
      </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 left action input">
      <div class="ui teal labeled icon button">
        <i class="cart icon"></i>
        Checkout
      </div>
      <input type="text" value="$52.03">
    </div>
  </div>
  <div class="another example">
    <div class="ui action input">
      <input type="text" value="http://ww.short.url/c0opq">
      <div class="ui teal right labeled icon button">
        <i class="copy icon"></i>
        Copy
      </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">Transparent</h4>
    <p>A transparent input has no background</p>
    <div class="ui transparent input">
      <input type="text" placeholder="Search...">
    </div>
  </div>
  <div class="another example">
    <div class="ui transparent icon input">
      <i class="search icon"></i>
      <input type="text" placeholder="Search...">
    </div>
  </div>
  <div class="another example">
    <div class="ui transparent left icon input">
      <i class="search icon"></i>
      <input type="text" placeholder="Search...">
    </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 class="ui ignored divider"></div>
    <div class="ui fluid action input">
      <input type="text" placeholder="Search...">
      <div class="ui button">Search</div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Size</h4>
    <p>An input can vary in size</p>
    <div class="ui ignored info message">Inputs will automatically size themselves unless you manually declare a width</div>
    <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>