---
layout      : 'default'
css         : 'form'

title       : 'Form'
description : 'A form is a collection of user input elements'
type        : 'UI Collection'
---
<script src="/javascript/form.js"></script>

<%- @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">Elements</a>
      <a class="item">States</a>
      <a class="item">Variations</a>
      <a class="item">Groups</a>
    </div>
  </div>
  <h2 class="ui dividing header">Types</h2>

  <div class="example">
    <h4 class="ui header">Form:</h4>
    <p>
      Forms always include fields, and fields always contain form elements. Fields themselves may also include:
        <a href="/elements/input.html">inputs</a>, standard form fields, <a href="/elements/label.html">labels</a>, <a href="/modules/dropdown.html">selection dropdowns</a>, textareas, as well as:
        <a href="/modules/checkbox.html">checkboxes</a>, and <a href="/collections/message.html">message blocks</a>.
    </p>
    <p>Validation messages use <a href="/collections/message.html">messages</a> which are formatted for use inside forms.</p>
    <div class="ui ignored warning message">
      <p>If you are looking for form validation, you should check out <a href="/modules/form.html">form validation</a>.</p>
    </div>
    <div class="ui ignored info message">
      <p>This example uses a <a href="/elements/segment.html">ui segment</a> to add the padding and background color. This is not required.</p>
    </div>
    <div class="ui form segment">
      <div class="field">
        <label>Username</label>
        <div class="ui left labeled icon input">
          <input type="text" placeholder="Username">
          <i class="user icon"></i>
          <div class="ui corner label">
            <i class="icon asterisk"></i>
          </div>
        </div>
      </div>
      <div class="field">
        <label>Password</label>
        <div class="ui left labeled icon input">
          <input type="password">
          <i class="lock icon"></i>
          <div class="ui corner label">
            <i class="icon asterisk"></i>
          </div>
        </div>
      </div>
      <div class="ui error message">
        <div class="header">We noticed some issues</div>
      </div>
      <div class="ui blue submit button">Login</div>
    </div>
  </div>

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

  <div class="example">
    <h4 class="ui header">Field</h4>
    <p>A field is a form element containing a label and an input</p>
    <div class="ui form">
      <div class="field">
        <label>User Input</label>
        <input type="text">
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Text Area</h4>
    <p>A textarea uses the default form element</p>
    <div class="ui form">
      <div class="field">
        <label>User Text</label>
        <textarea></textarea>
      </div>
    </div>
  </div>

  <div class="no example">
    <h4 class="ui header">Checkbox</h4>
    <p><a href="/modules/checkbox.html">UI Checkboxes</a> are styled forms of standard form checkboxes.</p>
    <div class="evaluated code" data-type="javascript" data-label="true">
    $('.ui.checkbox')
      .checkbox()
    ;
    </div>
    <div class="ui form">
      <div class="inline field">
        <div class="ui checkbox">
          <input type="checkbox" />
          <label>Checkbox</label>
        </div>
      </div>
      <div class="inline field">
        <div class="ui slider checkbox">
          <input type="checkbox" />
          <label>Slider</label>
        </div>
        <label></label>
      </div>
      <div class="inline field">
        <div class="ui toggle checkbox">
          <input type="checkbox" />
          <label>Toggle</label>
        </div>
      </div>
    </div>
  </div>

  <div class="no form example">
    <h4 class="ui header">Select</h4>
    <p>A selection dropdown, a type of <a href="/modules/dropdown.html">ui dropdown</a> can be used to allow for a selection from multiple choices</p>
    <div class="evaluated code" data-type="javascript" data-label="true">
    $('.ui.selection.dropdown')
      .dropdown()
    ;
    </div>
    <div class="ui selection dropdown">
      <input type="hidden" name="gender">
      <div class="default text">Gender</div>
      <i class="dropdown icon"></i>
      <div class="menu">
        <div class="item" data-value="male">Male</div>
        <div class="item" data-value="female">Female</div>
      </div>
    </div>
  </div>

  <div class="no example">
    <h4 class="ui header">Radio Box</h4>
    <p>Radio boxes are styled forms of standard form radio controls.</p>
    <div class="evaluated code" data-type="javascript" data-label="true">
    $('.ui.radio.checkbox')
      .checkbox()
    ;
    </div>
    <div class="ui form">
      <div class="grouped inline fields">
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" checked />
            <label>Apples</label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" />
            <label>Oranges</label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" />
            <label>Pears</label>
          </div>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" />
            <label>Grapefruit</label>
          </div>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Text Block</h4>
    <p>Text blocks have special meaning inside a form tag. Any info, error, or warning message blocks found inside a form are hidden by default.</p>
    <div class="ui form">
      <div class="ui message">
        <div class="header">We had some issues</div>
        <ul class="list">
          <li>Please enter your first name</li>
          <li>Please enter your last name</li>
        </ul>
      </div>
    </div>
  </div>

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

  <h3 class="ui header">Form</h3>

  <div class="example">
    <h4 class="ui header">Loading</h4>
    <p>If a form is in loading state, it will automatically show a loading indicator:</p>

    <div class="ui loading form segment">
      <div class="two fields">
        <div class="field">
          <label>First Name</label>
          <input placeholder="First Name" type="text">
        </div>
        <div class="field">
          <label>Last Name</label>
          <input placeholder="Last Name" type="text">
        </div>
      </div>
      <div class="field">
        <label>Username</label>
        <input placeholder="Username" type="text">
      </div>
      <div class="field">
        <label>Password</label>
        <input type="password">
      </div>
      <div class="inline field">
        <div class="ui checkbox">
          <input type="checkbox" />
          <label>I agree to the terms and conditions</label>
        </div>
      </div>
      <div class="ui blue submit button">Submit</div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Error</h4>
    <p>If a form is in an error state, it will automatically show any error message blocks:</p>
    <div class="ui error form segment">
      <div class="ui error message">
        <div class="header">Action Forbidden</div>
        <p>You can only sign up for an account once with a given e-mail address.</p>
      </div>
      <div class="two fields">
        <div class="field">
          <label>First Name</label>
          <input placeholder="First Name" type="text">
        </div>
        <div class="field">
          <label>Last Name</label>
          <input placeholder="Last Name" type="text">
        </div>
      </div>
      <div class="field">
        <label>Username</label>
        <input placeholder="Username" type="text">
      </div>
      <div class="field">
        <label>Password</label>
        <input type="password">
      </div>
      <div class="inline field">
        <div class="ui checkbox">
          <input type="checkbox" />
          <label>I agree to the Terms and Conditions</label>
        </div>
      </div>
      <div class="ui blue submit button">Submit</div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Warning</h4>
    <p>If a form is in warning state, it will automatically show any warning message block:</p>

    <div class="ui warning form segment">
      <div class="ui warning message">
        <div class="header">Could you check something!</div>
        <ul class="list">
          <li>You forgot your <b>first name</b></li>
          <li>And also your <b>last name</b></li>
        </ul>
      </div>
      <div class="two error fields">
        <div class="field">
          <label>First Name</label>
          <input placeholder="First Name" type="text">
          <div class="ui red pointing above ui label">Enter a first name</div>
        </div>
        <div class="field">
          <label>Last Name</label>
          <input placeholder="Last Name" type="text">
          <div class="ui red pointing above ui label">Enter a last name</div>
        </div>
      </div>
      <div class="field">
        <label>Username</label>
        <input placeholder="Username" type="text">
      </div>
      <div class="field">
        <label>Password</label>
        <input type="password">
      </div>
      <div class="inline field">
        <div class="ui checkbox">
          <input type="checkbox" />
          <label>I agree to the Terms and Conditions</label>
        </div>
      </div>
      <div class="ui blue submit button">Submit</div>
    </div>
  </div>

  <h3 class="ui header">Form Fields</h3>

  <div class="example">
    <h4 class="ui header">Error</h4>
    <p>Individual fields may contain an error state</p>

    <div class="ui form segment">
      <div class="two fields">
        <div class="field error">
          <label>First Name</label>
          <input placeholder="First Name" type="text">
        </div>
        <div class="field">
          <label>Last Name</label>
          <input placeholder="Last Name" type="text">
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Disabled</h4>
    <p>Individual fields may be disabled or read only</p>

    <div class="ui form segment">
      <div class="two fields">
        <div class="field">
          <label>First Name</label>
          <input placeholder="Read Only" readonly="readonly" type="text">
        </div>
        <div class="disabled field">
          <label>Last Name</label>
          <input placeholder="Disabled" disabled="disabled" type="text">
        </div>
      </div>
    </div>
  </div>

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

  <h3 class="ui header">Forms</h3>

  <div class="example">
    <h4 class="ui header">Fluid</h4>
    <p>A form can take the width of its container</p>
    <div class="ui fluid form segment">
      <div class="two fields">
        <div class="field">
          <label>First Name</label>
          <input placeholder="First Name" type="text">
        </div>
        <div class="field">
          <label>Last Name</label>
          <input placeholder="Last Name" type="text">
        </div>
      </div>
      <div class="ui blue submit button">Submit</div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Size</h4>
    <p>A form can also be small or large</p>
    <div class="ui small form segment">
      <div class="two fields">
        <div class="field">
          <label>First Name</label>
          <input placeholder="First Name" type="text">
        </div>
        <div class="field">
          <label>Last Name</label>
          <input placeholder="Last Name" type="text">
        </div>
      </div>
      <div class="ui blue small submit button">Submit</div>
    </div>
    <br><br>
    <div class="ui large form segment">
      <div class="two fields">
        <div class="field">
          <label>First Name</label>
          <input placeholder="First Name" type="text">
        </div>
        <div class="field">
          <label>Last Name</label>
          <input placeholder="Last Name" type="text">
        </div>
      </div>
      <div class="ui blue submit button">Submit</div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Inverted</h4>
    <p>A form on a dark background may have to invert its color scheme</p>

    <div style="background-color: #333333; padding: 15px;">
      <div class="ui inverted form">
        <div class="ui info message">
          <div class="header">We had some issues</div>
          <ul class="list">
            <li>Please enter your first name</li>
            <li>Please enter your last name</li>
          </ul>
        </div>
        <div class="two fields">
          <div class="field">
            <label>First Name</label>
            <input placeholder="First Name" type="text">
          </div>
          <div class="field">
            <label>Last Name</label>
            <input placeholder="Last Name" type="text">
          </div>
        </div>
        <div class="ui blue submit button">Submit</div>
      </div>
    </div>
  </div>


  <h3 class="ui header">Fields</h3>

  <div class="example">
    <h4 class="ui header">Inline</h4>
    <p>A field can have its label next to instead of above it.</p>
    <div class="ui form">
        <div class="inline field">
          <label>Last name</label>
          <input type="text" placeholder="Full Name">
        </div>
    </div>
  </div>


  <div class="example">
    <h4 class="ui header">Date</h4>
    <p>A field can let users know they are for dates</p>
    <div class="ui form">
      <div class="date field">
        <label>Birthday</label>
        <input type="text" placeholder="xx/xx/xxxx">
      </div>
    </div>
  </div>


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

  <div class="example">
    <h4 class="ui header">Fields</h4>
    <p>Fields can exist together side by side</p>
    <div class="ui ignored positive icon message">
      <i class="mobile icon"></i>
      <div class="content">
        <h3 class="header">Responsive Element</h3>
        <p>Grouped fields automatically receive responsive styling, swapping to one field per row for mobile.</p>
      </div>
    </div>
    <div class="ui form">
      <div class="ui three fields">
        <div class="field">
          <label>First name</label>
          <input type="text" placeholder="First Name">
        </div>
        <div class="field">
          <label>Middle name</label>
          <input type="text" placeholder="Middle Name">
        </div>
        <div class="field">
          <label>Last name</label>
          <input type="text" placeholder="Last Name">
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Grouped Fields</h4>
    <p>Fields can be grouped to show related choices</p>
    <div class="ui form">
      <div class="grouped inline fields">
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" />
            <label></label>
          </div>
          <label> Apples</label>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" />
            <label></label>
          </div>
          <label> Oranges</label>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" />
            <label></label>
          </div>
          <label> Pears</label>
        </div>
        <div class="field">
          <div class="ui radio checkbox">
            <input type="radio" name="fruit" />
            <label></label>
          </div>
          <label> Grapefruit</label>
        </div>
      </div>
    </div>
  </div>

  <div class="example">
    <h4 class="ui header">Inline</h4>
    <p>Multiple fields may be inline in a row</p>
    <div class="ui form">
      <div class="inline fields">
        <div class="field">
          <label>Phone Number</label>
          <input type="text" placeholder="(xxx)">
        </div>
        <div class="field">
          <input type="text" placeholder="xxx">
        </div>
        <div class="field">
          <input type="text" placeholder="xxxx">
        </div>
      </div>
    </div>
  </div>

</div>