Basics

Form elements

Form elements are rendered as block elements, for consistency and ease of styling. Input fields can become inline elements by adding the layout block utility class inline-block.

Single line input fields

Text

<label for="text-example">Text:</label>
<input id="text-example" name="examplename" placeholder="Example text input field" type="text">

Email

<label for="email-example">Email:</label>
<input id="email-example" name="examplename" placeholder="Example email input field" type="email">

Telephone number

<label for="tel-example">Tel:</label>
<input id="tel-example" name="examplename" placeholder="Example phone number input field" type="tel">
<label for="search-example">Search:</label>
<input id="search-example" name="examplename" placeholder="Example search input field" type="search">

Numeric

<label for="number-example">Number:</label>
<input id="number-example" name="examplename" placeholder=" Example number input field" type="number">

Date

<label for="date-example">Date:</label>
<input id="date-example" name="examplename" placeholder="Example date input field" type="date">

Time

<label for="time-example">Time:</label>
<input id="time-example" name="examplename" placeholder="Example time input field" type="time">

Password

<label for="password-example">Password:</label>
<input id="password-example" name="examplename" placeholder="Example password input field" type="password">

File upload

<label for="upload-example">File upload:</label>
<input id="upload-example" type="file" id="upload-1" name="examplename" accept="image/png, image/jpeg">

Textareas (multi line)

<label for="textarea-example">Textarea:</label>
<textarea id="textarea-example" name="examplename" type="textarea" placeholder="Example textarea" rows="4"></textarea>

Selects

Single selects

<label for="single-select-example">Single select:</label>
<select id="single-select-example" name="examplename">
  <option value="first">First option </option>
  <option value="second">Second option </option>
  <option value="third">Third option</option>
</select>

Multi selects

<label for="multi-select-example">Multi-select:</label>
<select id="multi-select-example" name="examplename" multiple size="3">
  <option value="first">First option </option>
  <option value="second">Second option </option>
  <option value="third">Third option</option>
</select>

Radio boxes and checkboxes

Radio

Radios 
<div class="fieldset-item cluster">
  <input id="radio-1" name="examplename" checked="checked" type="radio">
  <label for="radio-1">Radio 1</label>
</div>
<div class="fieldset-item cluster">
  <input id="radio-2" name="examplename" type="radio">
  <label for="radio-2">Radio 2</label>
</div>
<div class="fieldset-item cluster">
  <input id="radio-3" name="examplename" type="radio">
  <label for="radio-3">Radio 3</label>
</div>

Checkbox

Checkboxes 
<div class="fieldset-item cluster">
  <input id="checkbox-1" name="examplename" checked="checked" type="checkbox">
  <label for="checkbox-1">Checkbox 1 </label>
</div>
<div class="fieldset-item cluster">
  <input id="checkbox-2" name="examplename" type="checkbox">
  <label for="checkbox-2">Checkbox 2</label>
</div>
<div class="fieldset-item cluster">
  <input id="checkbox-3" name="examplename" type="checkbox">
  <label for="checkbox-3">Checkbox 3</label>
</div>

Switch

Buttons

The default button:

<button class="button">Button</button>
<input value="Click me" type="button" class="button">
<input value="Submit" type="submit" class="button">
<input value="Reset" type="reset" class="button">

See also the UI button component.

Sizes