dijit.Fieldset

Authors:Bill Keese Project owner:Bill Keese

Contents

• dijit.Fieldset
  • Introduction
  • Examples
  • Accessibility

Introduction

A Fieldset widget is a fieldset that can be opened or collapsed. The visibility of the Fieldset’s contents is toggled by clicking the Fieldset’s legend. It extends TitlePane.

Examples

Programmatic example

require(["dijit/Fieldset", "dojo/dom", "dojo/domReady!"], function(Fieldset, dom){
    var tp = new Fieldset({title:"I'm a Fieldset", content: "Collapse me!"});
    dom.byId("holder").appendChild(tp.domNode);
    tp.startup();
});

require(["dijit/Fieldset", "dojo/dom", "dojo/domReady!"], function(Fieldset, dom){ var tp = new Fieldset({title:"I'm a Fieldset", content: "Collapse me!"}); dom.byId("holder").appendChild(tp.domNode); tp.startup(); });

<div id="holder"></div>

<div id="holder"></div>

Note that when created programatically, the Fieldset’s legend is called “title”, to be consistent with programmatic creation of other widgets.

Declarative markup

Creation from markup is even easier.

require(["dojo/parser", "dijit/Fieldset"]);

require(["dojo/parser", "dijit/Fieldset"]);

<div id="tp2" data-dojo-type="dijit/Fieldset">
    <legend>My legend</legend>
    Click legend to close me.
</div>

<div id="tp2" data-dojo-type="dijit/Fieldset"> <legend>My legend</legend> Click legend to close me. </div>

Accessibility

Keyboard

Each Fieldset legend is included in the tab order of the document.

Action	Key
toggle open/close	enter or space key with focus on the legend
Navigate into an opened Fieldset	tab

Table of Contents

• dijit.Fieldset
  • Introduction
  • Examples
    • Programmatic example
    • Declarative markup
  • Accessibility
    • Keyboard