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