No notes defined.
<form method="post" enctype="multipart/form-data" action="#">
<fieldset class='form-wrapper'>
<legend class='fieldset__legend'>
<span class='fieldset__legend__heading'>Form legend</span>
</legend>
<div class='fieldset__wrapper'>
<div class='form-group'>
<label class='form-field'>
<span class='form-field__label'>Text field</span>
<em class='form-field__description'>A short description</em>
<input invalid='true' class='form-input form-input--text' type='text' placeholder='e.g. Your preferences' />
<span class='form-field__description form-field__description--error'>Something's wrong with the input</span>
</label>
</div>
<div class='form-group'>
<label>
<span class='form-field__label'>Email</span>
<input class='form-input form-input--email' type='email' placeholder='e.g. Your preferences' />
<em class='form-field__description'>A description under the form control</em>
</label>
</div>
<div class='form-group'>
<label>
<span class='form-field__label'>Text area</span>
<textarea class='form-input form-input--textarea' placeholder='e.g. Longer text'></textarea>
</label>
</div>
</div>
</fieldset>
<fieldset class='form-wrapper'>
<div class='fieldset__wrapper'>
<div class='form-group'>
<label>
<span class='form-field__label'>Select</span>
<select class='form-input form-input--select' name='select'>
<option value='1'>Option 1</option>
<option value='2'>Option 2</option>
<option value='3'>Option 3</option>
</select>
</label>
</div>
<div class='form-group'>
<div class='form-field__label'>Radios</div>
<label><input class='form-input form-input--radio' type='radio' name='radios' /> Option 1</label>
<label><input class='form-input form-input--radio' type='radio' name='radios' /> Option 2</label>
<label><input class='form-input form-input--radio' type='radio' name='radios' /> Option 3</label>
</div>
<div class='form-group'>
<span class='form-field__label'>Checkboxes</span>
<label><input class='form-input form-input--checkbox' type='checkbox' name='checkboxes' /> Option 1</label>
<label><input class='form-input form-input--checkbox' type='checkbox' name='checkboxes' /> Option 2</label>
<label><input class='form-input form-input--checkbox' type='checkbox' name='checkboxes' /> Option 3</label>
</div>
</div>
</fieldset>
<div class='form-group form-actions'>
<button class='c-button'>Submit button</button>
<input type='submit' value='Submit input' />
<button class='c-button--secondary'>Secondary</button>
<button class='c-button' disabled>Disabled</button>
</div>
</form>
<form method="post" enctype="multipart/form-data" action="#">
<fieldset class='form-wrapper'>
<legend class='fieldset__legend'>
<span class='fieldset__legend__heading'>Form legend</span>
</legend>
<div class='fieldset__wrapper'>
<div class='form-group'>
<label class='form-field'>
<span class='form-field__label'>Text field</span>
<em class='form-field__description'>A short description</em>
<input invalid='true' class='form-input form-input--text' type='text' placeholder='e.g. Your preferences' />
<span class='form-field__description form-field__description--error'>Something's wrong with the input</span>
</label>
</div>
<div class='form-group'>
<label>
<span class='form-field__label'>Email</span>
<input class='form-input form-input--email' type='email' placeholder='e.g. Your preferences' />
<em class='form-field__description'>A description under the form control</em>
</label>
</div>
<div class='form-group'>
<label>
<span class='form-field__label'>Text area</span>
<textarea class='form-input form-input--textarea' placeholder='e.g. Longer text'></textarea>
</label>
</div>
</div>
</fieldset>
<fieldset class='form-wrapper'>
<div class='fieldset__wrapper'>
<div class='form-group'>
<label>
<span class='form-field__label'>Select</span>
<select class='form-input form-input--select' name='select'>
<option value='1'>Option 1</option>
<option value='2'>Option 2</option>
<option value='3'>Option 3</option>
</select>
</label>
</div>
<div class='form-group'>
<div class='form-field__label'>Radios</div>
<label><input class='form-input form-input--radio' type='radio' name='radios' /> Option 1</label>
<label><input class='form-input form-input--radio' type='radio' name='radios' /> Option 2</label>
<label><input class='form-input form-input--radio' type='radio' name='radios' /> Option 3</label>
</div>
<div class='form-group'>
<span class='form-field__label'>Checkboxes</span>
<label><input class='form-input form-input--checkbox' type='checkbox' name='checkboxes' /> Option 1</label>
<label><input class='form-input form-input--checkbox' type='checkbox' name='checkboxes' /> Option 2</label>
<label><input class='form-input form-input--checkbox' type='checkbox' name='checkboxes' /> Option 3</label>
</div>
</div>
</fieldset>
<div class='form-group form-actions'>
<button class='c-button'>Submit button</button>
<input type='submit' value='Submit input' />
<button class='c-button--secondary'>Secondary</button>
<button class='c-button' disabled>Disabled</button>
</div>
</form>
/* No context defined. */