v7.3.0

FieldSet
Widget

A container that wraps an HTML <fieldset> element, providing a titled group for related form fields. It renders a styled Panel with an optional title displayed as a <legend>. Child widgets are added via items and can be laid out horizontally or vertically using inline. Supports collapsing via collapsible.

const fieldSet = new FieldSet({
    title : 'Contact Details',
    items : {
        name  : { type : 'textfield', label : 'Name' },
        email : { type : 'textfield', label : 'Email' }
    },
    appendTo : document.body
});

Useful configs and properties

Config Description
title Legend text displayed at the top of the fieldset
items Child widgets (typically form fields)
inline Horizontal layout (true) or vertical (false)
label Optional label displayed beside the fieldset
collapsible Allow collapsing/expanding the fieldset

See also

No results

Configs

Configs are options you supply in a configuration object when creating an instance of this class

Properties

Properties are getters/setters or publicly accessible variables on this class
  • isFieldSet : Booleantrue
    READONLY
    static
    ADVANCED
    Identifies an object as an instance of FieldSet class, or subclass thereof.
  • isFieldSet : Booleantrue
    READONLY
    ADVANCED
    Identifies an object as an instance of FieldSet class, or subclass thereof.

CSS variables

CSS variables that can be set to adjust appearance
Name Description
--b-field-set-background Fieldset background
--b-field-set-border-color Fieldset border-color
--b-field-set-border-radius Fieldset border-radius
--b-field-set-border-width Fieldset border-width
--b-field-set-label-font-size Fieldset label font size
--b-field-set-padding Fieldset padding
type: fieldset

Source path

Core/widget/FieldSet.js

Contents