Styles

Forms

This page demonstrates the styling on base (and other common), form-related elements. It is not intended for direct re-use. Instead, please see the components.

Form groups

This is a form group.
<div class="form-group">This is a form group.</div>

<div className="form-group">
  This is a form group.
</div>

Errors

This is a form group has an error.
<div class="form-group error">
  This is a form group has an error.
</div>

<div className="form-group error">
  This is a form group has an error.
</div>

Error with message

This is an error message.
<div class="error">
  <div class="message">This is an error message.</div>
</div>

<div className="error">
  <div className="message">
    This is an error message.
  </div>
</div>

Fieldsets

This is a fieldset.
<fieldset>This is a fieldset.</fieldset>

<fieldset>This is a fieldset.</fieldset>

With legend

This is a legendThis is a fieldset with a legend. 
<fieldset>
  <legend>This is a legend</legend>
  This is a fieldset with a legend.
</fieldset>

<fieldset>
  <legend>This is a legend</legend>
  This is a fieldset with a legend.
</fieldset>

Labels

<label>This is a label.</label>

<label>This is a label.</label>

Hints

This is a hint.
<span class="hint">This is a hint.</span>

<span className="hint">This is a hint.</span>

Inputs

Text

<input type="text" name="example" />

<input name="example" type="text" />

Error

<div class="error">
  <input type="text" name="example" />
</div>

<div className="error">
  <input name="example" type="text" />
</div>

E-mail

<input type="email" name="example" />

<input name="example" type="email" />

Password

<input type="password" name="example" />

<input name="example" type="password" />

Number

<input type="number" name="example" />

<input name="example" type="number" />

Colour

<input type="color" name="example" />

<input name="example" type="color" />

Date

<input type="date" name="example" />

<input name="example" type="date" />

Datetime local

<input type="datetime-local" name="example" />

<input name="example" type="datetime-local" />

Time

<input type="time" name="example" />

<input name="example" type="time" />

File

<input type="file" name="example" />

<input name="example" type="file" />

Month

<input type="month" name="example" />

<input name="example" type="month" />

Week

<input type="week" name="example" />

<input name="example" type="week" />

Range

<input type="range" name="example" />

<input name="example" type="range" />

Search

<input type="search" name="example" />

<input name="example" type="search" />

Tel

<input type="tel" name="example" />

<input name="example" type="tel" />

URL

<input type="url" name="example" />

<input name="example" type="url" />

Checkbox

<input type="checkbox" name="example" />

<input name="example" type="checkbox" />

Radio

<input type="radio" name="example" />

<input name="example" type="radio" />

Select

<select name="example">
  <option>Foo</option>
  <option>Bar</option>
  <option>Baz</option>
</select>

<select name="example">
  <option>Foo</option>
  <option>Bar</option>
  <option>Baz</option>
</select>

Mult-select

<select name="example" multiple="" size="3">
  <option>Foo</option>
  <option>Bar</option>
  <option>Baz</option>
</select>

<select name="example" multiple size="3">
  <option>Foo</option>
  <option>Bar</option>
  <option>Baz</option>
</select>

Textarea

<textarea name="example"></textarea>

<textarea name="example" />