Grouping UI controls

The Fieldset control can be used within a layout for neat arrangement of controls or within a form for grouping its elements. It creates a section with borders and a text label and allows separating logical parts of the form from each other.

live demo

  • Integration: jQuery, Angular, React, Vue.js, Backbone
  • Cross-browser Support (IE8+)
  • Ready for Touch Devices
  • Meets Section 508
  • Quick styling with CSS

Functionality

Overview

Fieldset can be used to create a section with borders to neatly place controls into the layout.

FormInput is an advanced version of the Fieldset that renders a section with a label to place a widget into it. The FormInput control allows using any Webix widget as a form element. All elements are rendered with the same style, which helps to create a good-looking form.

Fieldset

Fieldset has only a few properties, it doesn't require any significant effort to configure Fieldset. Using the two main properties, you can complete most of the work: define the elements that will be placed within the Fieldset and set the text label for it. Optionally, you can set paddings or hide the component borders.

FormInput

You can easily place any widget into a Form with the help of the FormInput. Wrapped in the Form Input, the widget will look like any other Form control. It is also possible to set the width of the label and choose its location - to the right or to the left of the control's container.