Styles
E-mail
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.
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.
<div class="form-group">This is a form group.</div>
<div className="form-group">
This is a form group.
</div>
<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>
<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>
<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>
<label><p>This is a label.</p></label>
<label>
<p>This is a label.</p>
</label>
<span class="hint"><p>This is a hint.</p></span>
<span className="hint">
<p>This is a hint.</p>
</span>
<input type="text" name="example" />
<input name="example" type="text" />
<div class="error">
<input type="text" name="example" />
</div>
<div className="error">
<input name="example" type="text" />
</div>
<input type="email" name="example" />
<input name="example" type="email" />
<input type="password" name="example" />
<input name="example" type="password" />
<input type="number" name="example" />
<input name="example" type="number" />
<input type="color" name="example" />
<input name="example" type="color" />
<input type="date" name="example" />
<input name="example" type="date" />
<input type="datetime-local" name="example" />
<input name="example" type="datetime-local" />
<input type="time" name="example" />
<input name="example" type="time" />
<input type="file" name="example" />
<input name="example" type="file" />
<input type="month" name="example" />
<input name="example" type="month" />
<input type="week" name="example" />
<input name="example" type="week" />
<input type="range" name="example" />
<input name="example" type="range" />
<input type="search" name="example" />
<input name="example" type="search" />
<input type="tel" name="example" />
<input name="example" type="tel" />
<input type="url" name="example" />
<input name="example" type="url" />
<input type="checkbox" name="example" />
<input name="example" type="checkbox" />
<input type="radio" name="example" />
<input name="example" type="radio" />
<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>
<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 name="example"></textarea>