Form - ZUI Documentation

Summary

There are two different ways to show forms. ZUI provides support for horizontally labeled forms and vertically labeled forms.

There are no attributes defined for this pattern.

Example

Text

This is a description of the element.

This is an error message for the element.

Password

This is a description of the element.

This is an error message for the element.

Color

This is a description of the element.

This is an error message for the element.

Date

This is a description of the element.

This is an error message for the element.

Datetime

This is a description of the element.

This is an error message for the element.

Datetime-local

This is a description of the element.

This is an error message for the element.

Time

This is a description of the element.

This is an error message for the element.

Week

This is a description of the element.

This is an error message for the element.

Month

This is a description of the element.

This is an error message for the element.

Email

This is a description of the element.

This is an error message for the element.

Tel

This is a description of the element.

This is an error message for the element.

Url

This is a description of the element.

This is an error message for the element.

File

This is a description of the element.

This is an error message for the element.

Number

This is a description of the element.

This is an error message for the element.

Range

This is a description of the element.

This is an error message for the element.

Search

This is a description of the element.

This is an error message for the element.

Markup

<form>
    <div class="zui-field-group">
        <label for="element">Input element</label>
        <input type="text" id="element" value="">
        <div class="zui-description">This is a description of the element.</div>
        <div class="zui-error">This is an error message for the element.</div>
    </div>
</form>

<div class="zui-button-file">
    <input type="file" required/>

    <span>Normal upload button</span>
</div>

<div class="zui-button-file zui-button-subtle">
    <input type="file" required/>

    <span>Subtle upload button</span>
</div>

<div class="zui-button-file zui-button-link">
    <input type="file" required/>

    <span>Link style upload button</span>
</div>

<form>
    <div class="zui-field-group">
        <span class="zui-form-label">Checkboxes</span>

        <div class="zui-field-group-inner">
            <div>
                <input type="checkbox" name="checkBoxA" id="checkBoxA">
                <label for="checkBoxA">Checkbox A</label>
            </div>
            <div>
                <input type="checkbox" name="checkBoxB" id="checkBoxB">
                <label for="checkBoxB">Checkbox B</label>
            </div>
            <div>
                <input type="checkbox" name="checkBoxC" id="checkBoxC">
                <label for="checkBoxC">Checkbox C</label>
            </div>
        </div>
        <div class="zui-description">This is a description of the element.</div>
        <div class="zui-error">This is an error message for the element.</div>
    </div>
</form>

<form>
    <div class="zui-field-group">
        <span class="zui-form-label">Radio buttons</span>

        <div class="zui-field-group-inner">
            <div>
                <input type="radio" name="radioBox" id="radioBoxA" checked="checked">
                <label for="radioBoxA">Radio box A</label>
            </div>
            <div>
                <input type="radio" name="radioBox" id="radioBoxB">
                <label for="radioBoxB">Radio box B</label>
            </div>
            <div>
                <input type="radio" name="radioBox" id="radioBoxC">
                <label for="radioBoxC">Radio box C</label>
            </div>
        </div>
        <div class="zui-description">This is a description of the element.</div>
        <div class="zui-error">This is an error message for the element.</div>
    </div>
</form>

<form>
    <div class="zui-field-group">
        <label>Dropdown</label>
        <select>
            <option>Select</option>
            <option>Option 1</option>
            <option>Option 2</option>
            <optgroup label="Group 1">
                <option>Option one</option>
                <option>Option two</option>
            </optgroup>
            <option>Option 3</option>
            <option>Option 4</option>
        </select>
    </div>
</form>

<form>
    <div class="zui-field-group">
        <label for="textareaElement">Textarea</label>
        <textarea id="textareaElement"></textarea>
        <div class="zui-description">This is a description of the element.</div>
        <div class="zui-error">This is an error message for the element.</div>
    </div>
</form>

Fork me on GitHub