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.

HTML
React

<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.

HTML
React

<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.

HTML
React

<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.

HTML
React

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

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

With legend

This is a legendThis is a fieldset with a legend.

HTML
React

<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

This is a label.

HTML
React

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

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

Hints

This is a hint.

HTML
React

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

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

Inputs

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

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

Error

HTML
React

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

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

E-mail

HTML
React

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

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

Password

HTML
React

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

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

Number

HTML
React

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

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

Colour

HTML
React

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

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

Date

HTML
React

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

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

Datetime local

HTML
React

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

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

Time

HTML
React

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

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

File

HTML
React

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

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

Month

HTML
React

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

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

Week

HTML
React

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

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

Range

HTML
React

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

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

Search

HTML
React

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

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

Tel

HTML
React

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

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

URL

HTML
React

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

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

Checkbox

HTML
React

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

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

Radio

HTML
React

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

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

Select

HTML
React

<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

HTML
React

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

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

Textarea

HTML
React

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

<textarea name="example" />