Base

<p class="intro">Some examples of sensibly/mildly reset/rebooted form styles</p>

<form class="">
    <fieldset>
        <legend class="">Example legend</legend>

        <div class="form__item">
            <label for="input">Example input</label>
            <input type="text" id="input" placeholder="Example input">
        </div>

        <div class="form__item">
            <label for="select">Example select</label>
            <select id="select">
                <option value="">Choose...</option>
                <optgroup label="Option group 1">
                    <option value="">Option 1</option>
                    <option value="">Option 2</option>
                    <option value="">Option 3</option>
                </optgroup>
                <optgroup label="Option group 2">
                    <option value="">Option 4</option>
                    <option value="">Option 5</option>
                    <option value="">Option 6</option>
                </optgroup>
            </select>
        </div>

        <fieldset class="form__group">
            <legend>Checkboxes: default</legend>
            <label>
                <input type="checkbox" value="">
                Check this checkbox
            </label>
            <label>
                <input type="checkbox" value="">
                Check this checkbox
            </label>
        </fieldset>

        <fieldset class="form__group  form__group--inline">
            <legend>Checkboxes: inline</legend>
            <span class="form__item">
                <input type="checkbox" value="" id="checkbox1a"><label for="checkbox1a">Check this checkbox</label>
            </span>
            <span class="form__item">
                <input type="checkbox" value="" id="checkbox2a"><label for="checkbox2a">Check this checkbox</label>
            </span>
            <span class="form__item">
                <input type="checkbox" value="" id="checkbox3a"><label for="checkbox3a">Check this longer labelled checkbox</label>
            </span>
            <span class="form__item">
                <input type="checkbox" value="" id="checkbox4a"><label for="checkbox4a">Check this checkbox</label>
            </span>
        </fieldset>

        <fieldset class="form__group">
            <legend>Radios: label-wrapped format</legend>
            <label>
                <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked="">
                Option one is this and that
            </label>
            <label>
                <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2">
                Option two is something else that's also super long to demonstrate the wrapping of these fancy form controls.
            </label>
            <label>
                <input type="radio" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
                Option three is disabled
            </label>
        </fieldset>

        <fieldset class="form__group">
            <legend>Radios: label-for format (with new-line indent)</legend>
            <div class="form__item">
                <input type="radio" name="optionsRadiosb" id="optionsRadios1b" value="option1a" checked="">
                <label for="optionsRadios1b">Option one is this and that</label>
            </div>

            <div class="form__item">
                <input type="radio" name="optionsRadiosb" id="optionsRadios2b" value="option2a">
                <label for="optionsRadios2b">Option two is something else that's also super long to demonstrate this option of wrapping to a new line indented to the input, of these fancy form
                    controls</label>
            </div>

            <div class="form__item">
                <input type="radio" name="optionsRadiosb" id="optionsRadios3b" value="option3a" disabled>
                <label for="optionsRadios3b">Option three is disabled</label>
            </div>
        </fieldset>

        <fieldset class="form__group  form__group--inline">
            <legend>Radios: inline</legend>
            <span class="form__item">
                <input type="radio" name="optionsRadiosa" id="optionsRadios1a" value="option1a" checked="">
                <label for="optionsRadios1a">Option one is this and that</label>
            </span>

            <span class="form__item">
                <input type="radio" name="optionsRadiosa" id="optionsRadios2a" value="option2a">
                <label for="optionsRadios2a">Option two is something else that's also super long</label>
            </span>

            <span class="form__item">
                <input type="radio" name="optionsRadiosa" id="optionsRadios3a" value="option3a" disabled>
                <label for="optionsRadios3a">Option three is disabled</label>
            </span>
        </fieldset>

        <div class="form__item">
            <label for="textarea">Example textarea</label>
            <textarea id="textarea" rows="3"></textarea>
        </div>

        <div class="form__item">
            <label for="date">Example date</label>
            <input type="date" id="date">
        </div>

        <div class="form__item">
            <label for="time">Example time</label>
            <input type="time" id="time">
        </div>

        <div class="form__item">
            <label for="output">Example output</label>
            <output name="result" id="output">100</output>
        </div>

        <div class="form__item">
            <button type="submit">Button submit</button>
            <input type="submit" value="Input submit button">
            <input type="reset" value="Input reset button">
            <input type="button" value="Input button">
        </div>

        <div class="form__item">
            <button type="submit" disabled>Button submit</button>
            <input type="submit" value="Input submit button" disabled>
            <input type="reset" value="Input reset button" disabled>
            <input type="button" value="Input button" disabled>
        </div>

        <div class="form__item">
            <button type="submit" class="button">Most important button style</button>
            <input type="submit" value="Lower priority button style" class="button  button--outline">
            <input type="reset" value="Lower priority button style" class="button button--outline-slate">
        </div>

        <div class="form__item">
            <button type="submit" disabled class="button">Button submit</button>
            <input type="submit" value="Input submit button" class="button  button--outline" disabled>
            <input type="reset" value="Input reset button" class="button  button--outline-slate" disabled>
            <input type="button" value="Input button" class="button" disabled>
        </div>
    </fieldset>
</form>