Forms

Forms

<!-- Default Input -->
<fieldset class="column column--full">
  <label for="dashing-text">Dashing Text Input</label>
  <input type="text" id="dashing-text"/>
</fieldset>

<!-- Disabled Input -->
<fieldset class="column column--full">
  <label for="dashing-text-disabled">Dashing Text Input disabled</label>
  <input type="text" id="dashing-text-disabled" value="This input is disabled" disabled />
</fieldset>

<fieldset class="column column--full">
  <label for="dashing-textarea">Dashing Textarea</label>
  <textarea id="dashing-textarea"></textarea>
</fieldset>

Select Menu

To add the drop-down icon, add the .select--has-icon class to the parent container. Ensure you also have the dashing-icon font library properly installed.

<!-- Select Element with custom icon -->
<fieldset class="column column--full select--has-icon">
  <label for="dashing-menu">Dashing Select Menu</label>
  <select id="dashing-menu">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</fieldset>

Input Group

NOTE: Due to the way the .select--has-icon class works, a select menu can only be placed on the right side of the input.

<!-- This is an example of an input group -->
<fieldset class="column column--full select--has-icon">
  <label for="dashing-input-group1">Input Group</label>
  <div class="input--add-on">
    <input type="text" class="add-on--before" id="dashing-input-group1" placeholder="e.g. (481) 516-2342"/>
    <select type="text" class="add-on--after">
      <option>Home</option>
      <option>Mobile</option>
      <option>Work</option>
    </select>
  </div>
</fieldset>

Input Add-on

NOTE: There is a Chrome bug that prevents this from working when applied to fieldset. Ensure your .input--add-on class is applied to a div.

This is not supported on Internet Explorer

<!-- This is an example of an add-on -->
<fieldset class="column column--half">
  <label for="dashing-input-action">Add-on button</label>
  <div class="input--add-on">
    <input type="text" class="add-on--field" id="dashing-input-action"/>
    <input type="submit" class="button button--green add-on--button" value="Submit">
  </div>
</fieldset>

<!-- This is an example of an add-on with an icon -->
<fieldset class="column column--half">
  <label for="dashing-input-action">Add-on icon</label>
  <div class="input--add-on">
    <input type="text" class="add-on--field" id="dashing-input-action"/>
    <button class="button--icon add-on--button">
      <i class="dashing-icon dashing-icon--calendar"></i>
    </button>
  </div>
</fieldset>

<!-- This is an example of an add-on -->
<fieldset class="column column--half">
  <label for="dashing-input-action">Add-on icon</label>
  <div class="input--add-on">
    <input type="text" class="add-on--field" id="dashing-input-action"/>
    <button class="button--icon button--gray add-on--button">
      Search
    </button>
  </div>
</fieldset>

<!-- This is an example of a bordered add-on with an icon -->
<fieldset class="column column--half">
  <label for="dashing-input-action">Add-on border icon</label>
  <div class="input--add-on">
    <input type="text" class="add-on--field" id="dashing-input-action"/>
    <button class="button--icon button--border add-on--button">
      <i class="dashing-icon dashing-icon--search"></i>
    </button>
  </div>
</fieldset>

Input Message States

<!-- Default Message -->
<fieldset class="column column--full">
  <label for="dashing-text-message">Dashing Text Input with error</label>
  <input type="text" id="dashing-text-message"/>
  <ul class="message">
    <li>This is a message.</li>
    <li>Default messages can be used to give additional information about an input.</li>
  </ul>
</fieldset>

<!-- Error Message -->
<fieldset class="column column--full has-error">
  <label for="dashing-text-error">Dashing Text Input with error</label>
  <input type="text" id="dashing-text-error"/>
  <ul class="message">
    <li>This is an error.</li>
    <li>Error messages are used to explain system failures or user errors.</li>
  </ul>
</fieldset>

<!-- Warning Message -->
<fieldset class="column column--full has-warning">
  <label for="dashing-text-warning">Dashing Text Input with warning</label>
  <input type="text" id="dashing-text-warning"/>
  <ul class="message">
    <li>This is an warning.</li>
    <li>Use warnings to convey important messages to your user.</li>
  </ul>
</fieldset>

Other Supported Input Types

<fieldset class="column column--full">
  <label for="dashing-date">Dashing Date</label>
  <input type="date" id="dashing-date"/>
</fieldset>

<fieldset class="column column--full">
  <label for="dashing-time">Dashing Time</label>
  <input type="time" id="dashing-time"/>
</fieldset>

<fieldset class="column column--full">
  <label for="dashing-month">Dashing Month</label>
  <input type="month" id="dashing-month"/>
</fieldset>

<fieldset class="column column--full">
  <label for="dashing-email">Dashing Email</label>
  <input type="email" id="dashing-email" placeholder="e.g. ryan@fitzinator.com"/>
</fieldset>

<fieldset class="column column--full">
  <label for="dashing-password">Dashing Password</label>
  <input type="password" id="dashing-password"/>
</fieldset>

<fieldset class="column column--full">
  <label for="dashing-number">Dashing Number</label>
  <input type="number" id="dashing-number"/>
</fieldset>

<fieldset class="column column--full">
  <label for="dashing-tel">Dashing Tel</label>
  <input type="tel" id="dashing-tel"/>
</fieldset>

<fieldset class="column column--full">
  <label for="dashing-file">Dashing File</label>
  <input type="file" id="dashing-file"/>
</fieldset>

Custom Range Slider

<!-- Custom Range Slider -->
<fieldset class="column column--full range--custom">
  <label for="dashing-range">Dashing Range</label>
  <input type="range" id="dashing-range"/>
</fieldset>