Forms & Dropdowns

Wikia forms for everyday use. You can have them just for $1. Buy now and you will get one radio button for free.

Text input and text area

Text inputs span a wide variety of types. They may contain persistent text elements (such as % or USD) where appropriate.

HTML

<input type="text" placeholder="Muppets, Iron Man, Moon">
<input type="search" placeholder="Search for cool things">

Text areas are large inputs where users can type and view larger blocks of text. They can also have buttons attached at the bottom.

HTML

<textarea placeholder="You can write here"></textarea>

Form states

Focus

There is currently no special style for focussed input elements.

Error/Warning I think something is wrong.

HTML

<input type="text" class="error">
<small class="error">I think something is wrong.</small>

Checkbox button fields

Checkboxes allow the user to choose between several options. One or more options may be selected.

Unchecked checkbox Checked checkbox Disabled checkbox

HTML

<label><input type="checkbox"> Unchecked checkbox</label>
<label><input type="checkbox" checked> Checked checkbox</label>
<label><input type="checkbox" checked disabled> Disabled checkbox</label>

Radio buttons fields

Radio buttons allow the user to choose only one of several options, and are used in place of select elements when showing all of the options is important, such as on a poll.

Unchecked radio button Checked radio button Disabled radio button

HTML

<label><input type="radio"> Unchecked radio button</label>
<label><input type="radio" checked> Checked radio button</label>
<label><input type="radio" checked disabled> Disabled radio button</label>

Dropdown

Picklists allow the user to select a value from a list of options. They can either restrict the user to one option or allow the user to pick multiple options.

Primary

Secondary

HTML

<select>
  <option>Menu 1</option>
  <option>Menu 2</option>
  ...
</select>

<select class="secondary">
  <option>Menu 1</option>
  <option>Menu 2</option>
  ...
</select>

Icon dropdown

Icon dropdown

HTML

<img class="dropdown-icon" src=".../icons/icon_avatar.svg">
<ul class="f-dropdown">
  <li><a>Menu 1</a></li>
  <li><a>Menu 2</a></li>
  ...
</ul>

Left side navigation

Left side navigation is a special case of an icon button. Behavior and interaction are the same.

HTML

<img class="dropdown-icon" src=".../icons/icon_menu.svg">
<ul class="f-dropdown nav">
  <li><a>History</a></li>
  <li><a>Personality</a></li>
  ...
</ul>