Forms ▸ Overview

DevExtreme ships with CSS classes that allow you to define the appearance of list-like structures that contain multiple field items -- field sets.

A Simple Field Set

To create a basic field set, use the dx-fieldset CSS class for the main container element. Then, use the dx-fieldset-header class to specify the field set header. The header element can contain plain text, UI components, or custom markup.

Create field set items as separate elements with the dx-field class. The field element can include label and value elements. To define the label element, use the dx-field-label class. The value element uses the dx-field-value-static class and can display plain text or custom markup.

A Field Set with DevExtreme Widgets

You can also use DevExtreme UI components as value elements. Specify the dx-field-value class in the component's HTML markup.

A Field Set with Custom Value Width

To align all field set elements by width, attach a custom id to the element with the dx-fieldset class and apply CSS rules according to the rules in the demo.

Simple Field Set

Full Name

Kevin Carter

Position

Shipping Manager

Field Set with DevExtreme Widgets

Address

City

Field Set with Custom Value Width

Notes

<div class="form">
    <div class="dx-fieldset">
        <div class="dx-fieldset-header">Simple Field Set</div>
        <div class="dx-field">
            <div class="dx-field-label">Full Name</div>
            <div class="dx-field-value-static">Kevin Carter</div>
        </div>
        <div class="dx-field">
            <div class="dx-field-label">Position</div>
            <div class="dx-field-value-static">Shipping Manager</div>
        </div>
    </div>
    <div class="dx-fieldset">
        <div class="dx-fieldset-header">Field Set with DevExtreme Widgets</div>
        <div class="dx-field">
            <div class="dx-field-label">Address</div>
            <div class="dx-field-value">
                @(Html.DevExtreme().TextBox()
                    .InputAttr("aria-label", "Address")
                    .Value("424 N Main St."))
            </div>
        </div>
        <div class="dx-field">
            <div class="dx-field-label">City</div>
            <div class="dx-field-value">
                @(Html.DevExtreme().TextBox()
                    .InputAttr("aria-label", "City")
                    .Value("San Diego"))
            </div>
        </div>
    </div>
    <div class="dx-fieldset" id="notes-container">
        <div class="dx-fieldset-header">Field Set with Custom Value Width</div>
        <div class="dx-field">
            <div class="dx-field-label">Notes</div>
            <div class="dx-field-value">
                @(Html.DevExtreme().TextArea()
                    .Height(80)
                    .Value("Kevin is our hard-working shipping manager and has been helping that department work like clockwork for 18 months. When not in the office, he is usually on the basketball court playing pick-up games."))
            </div>
        </div>
    </div>
</div>

using System.Web.Mvc;

namespace DevExtreme.MVC.Demos.Controllers {
    public class FieldSetController : Controller {

        public ActionResult Overview() {
            return View();
        }

    }
}

.dx-fieldset:first-child > h4:first-child {
    margin-top: 0;
}

#notes-container > .dx-field > .dx-field-label {
    width: 20%;
}

#notes-container > .dx-field > .dx-field-value {
    width: 80%;
}