<div class="uk-section">
    <div class="uk-container">

        <form class="uk-form-stacked">

            <legend class="uk-legend">Legend</legend>

            <div class="uk-margin-small uk-child-width-1-3" uk-grid>
                <div>
                    <span class="uk-form-label">Label</span>
                    <input class="uk-input" type="text" placeholder="placeholder">
                </div>
                <div>
                    <span class="uk-form-label">Focus</span>
                    <input class="uk-input" type="text" placeholder=":focus" autofocus>
                </div>
                <div>
                    <span class="uk-form-label">Blank</span>
                    <input class="uk-input" type="text" placeholder=":disabled" disabled>
                </div>
            </div>

        </form>

        <form class="uk-form-stacked uk-margin-medium">

            <div class="uk-margin-small uk-child-width-1-3" uk-grid>
                <div>
                    <span class="uk-form-label">Danger</span>
                    <input class="uk-input uk-form-danger" type="text" placeholder="form-danger" value="form-danger">
                </div>
                <div>
                    <span class="uk-form-label">Success</span>
                    <input class="uk-input uk-form-success" type="text" placeholder="form-success" value="form-success">
                </div>
                <div>
                    <span class="uk-form-label">Blank</span>
                    <input class="uk-input uk-form-blank" type="text" placeholder="form-blank">
                </div>
            </div>

        </form>

        <div class="uk-margin-large" uk-grid>

            <div class="uk-width-2-3@s">

                <h2 class="uk-h5 uk-heading-divider uk-margin-medium">Horizontal</h2>

                <form class="uk-form-horizontal">

                    <div class="uk-margin">
                        <span class="uk-form-label">Label</span>
                        <div class="uk-form-controls">
                            <input class="uk-input" type="text" placeholder="placeholder">
                        </div>
                    </div>

                    <div class="uk-margin">
                        <span class="uk-form-label">Textarea</span>
                        <div class="uk-form-controls">
                            <textarea class="uk-textarea" rows="1" placeholder="placeholder"></textarea>
                        </div>
                    </div>

                </form>

            </div>

            <div class="uk-width-1-3@s">

                <h2 class="uk-h5 uk-heading-divider uk-margin-medium">Select</h2>

                <form class="uk-form-stacked">

                    <select class="uk-select uk-form-width-large">
                        <option>Option 01</option>
                        <option>Option 02</option>
                    </select>

                    <select class="uk-select uk-form-width-large uk-margin-small" disabled>
                        <option>Option 01</option>
                        <option>Option 02</option>
                    </select>

                    <select class="uk-select uk-form-width-large" multiple="multiple">
                        <option>Option 01</option>
                        <option>Option 02</option>
                        <option>Option 03</option>
                        <option>Option 04</option>
                    </select>

                </form>

            </div>

        </div>

        <div uk-grid>

            <div class="uk-width-2-3@s">

                <form class="uk-form-stacked">

                    <h2 class="uk-h5 uk-heading-divider uk-margin-medium">Sizes</h2>

                    <div>
                        <span class="uk-form-label">Large</span>
                        <input class="uk-input uk-form-width-small uk-form-large" type="text" placeholder="placeholder">
                        <select class="uk-select uk-form-width-small uk-form-large">
                            <option>Option 01</option>
                            <option>Option 02</option>
                        </select>
                        <button class="uk-button uk-button-default uk-button-large">Button</button>
                        <button class="uk-button uk-button-primary uk-button-large">Button</button>
                        <label><input class="uk-checkbox" type="checkbox"> Checkbox</label>
                    </div>

                    <div class="uk-margin">
                        <span class="uk-form-label">Default</span>
                        <input class="uk-input uk-form-width-small" type="text" placeholder="placeholder">
                        <select class="uk-select uk-form-width-small">
                            <option>Option 01</option>
                            <option>Option 02</option>
                        </select>
                        <button class="uk-button uk-button-default">Button</button>
                        <button class="uk-button uk-button-primary">Button</button>
                        <label><input class="uk-checkbox" type="checkbox"> Checkbox</label>
                    </div>

                    <div class="uk-margin">
                        <span class="uk-form-label">Small</span>
                        <input class="uk-input uk-form-width-small uk-form-small" type="text" placeholder="placeholder">
                        <select class="uk-select uk-form-width-small uk-form-small">
                            <option>Option 01</option>
                            <option>Option 02</option>
                        </select>
                        <button class="uk-button uk-button-default uk-button-small">Button</button>
                        <button class="uk-button uk-button-primary uk-button-small">Button</button>
                        <label><input class="uk-checkbox" type="checkbox"> Checkbox</label>
                    </div>

                </form>

            </div>

            <div class="uk-width-1-3@s">

                <form class="uk-form-stacked uk-margin-large">
                    <h2 class="uk-h5 uk-heading-divider uk-margin-medium">Radio</h2>
                    <div>
                        <label><input class="uk-radio" type="radio" name="radio1" checked> Checked</label><br>
                        <label><input class="uk-radio" type="radio" name="radio1"> Unchecked</label><br>
                        <label><input class="uk-radio" type="radio" name="radio2" disabled> Disabled</label><br>
                        <label><input class="uk-radio" type="radio" name="radio2" disabled checked> Disabled Checked</label>
                    </div>
                    <h2 class="uk-h5 uk-heading-divider uk-margin-medium-bottom uk-margin-large-top">Checkbox</h2>
                    <div>
                        <label><input class="uk-checkbox" type="checkbox" checked> Checked</label><br>
                        <label><input class="uk-checkbox" type="checkbox"> Unchecked</label><br>
                        <label><input class="uk-checkbox" type="checkbox" disabled> Disabled</label><br>
                        <label><input class="uk-checkbox" type="checkbox" disabled checked> Disabled Checked</label><br>
                    </div>

                </form>

            </div>
        </div>

        <div uk-grid>

            <div class="uk-width-2-3@s">

                <h2 class="uk-h5 uk-heading-divider uk-margin-medium">Widths</h2>

                <form class="uk-form-stacked">

                    <div class="uk-margin">
                        <span class="uk-form-label">Large</span>
                        <input class="uk-input uk-form-width-large" type="text" placeholder="form-width-large">
                    </div>

                    <div class="uk-margin">
                        <span class="uk-form-label">Medium</span>
                        <input class="uk-input uk-form-width-medium" type="text" placeholder="form-width-medium">
                    </div>

                    <div class="uk-margin">
                        <span class="uk-form-label">Small</span>
                        <input class="uk-input uk-form-width-small" type="text" placeholder="form-width-small">
                    </div>

                    <div class="uk-margin">
                        <span class="uk-form-label">xSmall</span>
                        <input class="uk-input uk-form-width-xsmall" type="text" placeholder="form-width-xsmall">
                    </div>

                </form>

            </div>

            <div class="uk-width-1-3@s">

                <h2 class="uk-h5 uk-heading-divider uk-margin-medium">Icon</h2>

                <form class="uk-form-stacked">

                    <div class="uk-margin">
                        <span class="uk-form-label">Not clickable</span>
                        <div class="uk-inline">
                            <span class="uk-form-icon" uk-icon="icon: lock"></span>
                            <input class="uk-input uk-form-width-medium" type="text">
                        </div>
                    </div>

                    <div class="uk-margin">
                        <span class="uk-form-label">Clickable</span>
                        <div class="uk-inline">
                            <a class="uk-form-icon" href="#" uk-icon="icon: link"></a>
                            <input class="uk-input" type="text">
                        </div>
                    </div>

                </form>

            </div>

        </div>

    </div>
</div>