Forms

<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">
            <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>



        <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--blue-outline">
        </div>

        <div class="form__item">
            <button type="submit" class="button" disabled>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--blue-outline" disabled>
            <input type="button" value="Input button" class="button" disabled>
        </div>
    </fieldset>
</form>