There are no notes for this item.

<form method="post" enctype="multipart/form-data" action="#">
    <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 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 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="#">
    <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 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 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 for this component. */