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

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

                    <h2>Horizontal</h2>

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

                        <div class="uk-margin">
                            <label class="uk-form-label" for="form-h-text">Text</label>
                            <div class="uk-form-controls">
                                <input class="uk-input uk-form-width-large" id="form-h-text" type="text" placeholder="Some text...">
                            </div>
                        </div>

                        <div class="uk-margin">
                            <label class="uk-form-label" for="form-h-select">Select</label>
                            <div class="uk-form-controls">
                                <select class="uk-select uk-form-width-large" id="form-h-select">
                                    <option>Option 01</option>
                                    <option>Option 02</option>
                                </select>
                            </div>
                        </div>

                        <div class="uk-margin">
                            <label class="uk-form-label" for="form-h-textarea">Textarea</label>
                            <div class="uk-form-controls">
                                <textarea class="uk-textarea uk-form-width-large" id="form-h-textarea" rows="5" placeholder="Some text..."></textarea>
                            </div>
                        </div>

                        <div class="uk-margin">
                            <span class="uk-form-label">Radio</span>
                            <div class="uk-form-controls uk-form-controls-text">
                                <div class="uk-grid-small uk-child-width-auto" uk-grid>
                                    <label><input class="uk-radio" type="radio" name="radio2"> A</label>
                                    <label><input class="uk-radio" type="radio" name="radio2"> B</label>
                                    <label><input class="uk-radio" type="radio" name="radio2"> C</label>
                                    <label><input class="uk-radio" type="radio" name="radio2" disabled> D</label>
                                </div>
                            </div>
                        </div>

                        <div class="uk-margin">
                            <span class="uk-form-label">Checkbox</span>
                            <div class="uk-form-controls uk-form-controls-text">
                                <div class="uk-grid-small uk-child-width-auto" uk-grid>
                                    <label><input class="uk-checkbox" type="checkbox"> A</label>
                                    <label><input class="uk-checkbox" type="checkbox"> B</label>
                                    <label><input class="uk-checkbox" type="checkbox"> C</label>
                                    <label><input class="uk-checkbox" type="checkbox" disabled> D</label>
                                </div>
                            </div>
                        </div>

                        <div class="uk-margin">
                            <label class="uk-form-label" for="form-h-multiple">Multiple</label>
                            <div class="uk-form-controls">
                                <select class="uk-select uk-form-width-large" id="form-h-multiple" multiple>
                                    <option>Option 01</option>
                                    <option>Option 02</option>
                                    <option>Option 03</option>
                                    <option>Option 04</option>
                                </select>
                            </div>
                        </div>

                        <div class="uk-margin">
                            <label class="uk-form-label" for="form-h-range">Range</label>
                            <div class="uk-form-controls uk-form-controls-text">
                                <input class="uk-range uk-form-width-large" id="form-h-range" type="range" value="2" min="0" max="10" step="0.1">
                            </div>
                        </div>

                    </form>

                    <h2>Sizes</h2>

                    <form>

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

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

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

                    </form>

                    <h2>Widths</h2>

                    <form>

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

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

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

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

                    </form>

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

                    <h2>Stacked</h2>

                    <div class="uk-margin">
                        <span class="uk-form-label">States and styles</span>
                        <div class="uk-margin-small">
                            <input class="uk-input" type="text" placeholder=":disabled" aria-label="disabled" disabled>
                        </div>
                        <div class="uk-margin-small">
                            <select class="uk-select uk-form-width-large" aria-label="disabled" disabled>
                                <option>Option 01</option>
                                <option>Option 02</option>
                            </select>
                        </div>
                        <div class="uk-margin-small">
                            <input class="uk-input uk-form-danger" type="text" placeholder="form-danger" aria-label="form-danger" value="form-danger">
                        </div>
                        <div class="uk-margin-small">
                            <input class="uk-input uk-form-success" type="text" placeholder="form-success" aria-label="form-success" value="form-success">
                        </div>
                        <div class="uk-margin-small">
                            <input class="uk-input uk-form-blank" type="text" placeholder="form-blank" aria-label="form-blank">
                        </div>
                    </div>

                    <fieldset class="uk-fieldset">

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

                        <div class="uk-margin">
                            <label class="uk-form-label" for="form-s-text">Text</label>
                            <input class="uk-input" id="form-s-text" type="text" placeholder="Some text...">
                        </div>

                        <div class="uk-margin">
                            <label class="uk-form-label" for="form-s-select">Select</label>
                            <select class="uk-select" id="form-s-select">
                                <option>Option 01</option>
                                <option>Option 02</option>
                            </select>
                        </div>

                        <div class="uk-margin">
                            <label class="uk-form-label" for="form-s-textarea">Textarea</label>
                            <textarea class="uk-textarea" id="form-s-textarea" rows="5" placeholder="Some text..."></textarea>
                        </div>

                        <div class="uk-margin">
                            <span class="uk-form-label">Radio</span>
                            <label><input class="uk-radio" type="radio" name="radio1"> Option 01</label><br>
                            <label><input class="uk-radio" type="radio" name="radio1"> Option 02</label>
                        </div>

                        <div class="uk-margin">
                            <span class="uk-form-label">Checkbox</span>
                            <label><input class="uk-checkbox" type="checkbox"> Option 01</label><br>
                            <label><input class="uk-checkbox" type="checkbox"> Option 02</label>
                        </div>

                    </fieldset>

                    <div class="uk-margin">
                        <span class="uk-form-label">Icon</span>
                        <div class="uk-margin-small">
                            <div class="uk-inline">
                                <span class="uk-form-icon" uk-icon="icon: user"></span>
                                <input class="uk-input" type="text" aria-label="Icon">
                            </div>
                        </div>
                    </div>

                    <div class="uk-margin">
                        <span class="uk-form-label">Icon Link</span>
                        <div class="uk-margin-small">
                            <div class="uk-inline">
                                <a class="uk-form-icon" href="#" uk-icon="icon: pencil"></a>
                                <input class="uk-input" type="text" aria-label="Icon Link">
                            </div>
                        </div>
                    </div>

                </form>
            </div>

    </div>
</div>