Fieldset, Label & Legend

Interface of Fieldset
🏗 Coming Soon

Fieldset

The <Fieldset /> component is used to wrap Field components into groups.

This is the Legend

Fieldset can be displayed inline

This is the Legend
Validation Error
This is an error

Field can be individually displayed as inline inside Fieldset

This is the Legend

Legend

The legend property allows for a heading which is by default aligned above and to the left.

This is the Legend

Label

Using label as a prop in Field gives a larger clickable area since the area where the label is placed also is associated to the component that has the label.

This is the Legend

Accordion Mode

Fieldset offers an accordion mode via the accordion prop.

In accordion mode, the legend acts as a disclosure and clicking on it will show (or hide) the Fieldset's children.

Note: Using accordion mode without passing a value to legend will throw a console warning and will result in a regular Fieldset.

Controlling a Fieldset Accordion

All Accordion props pertaining to open state control can be used on Fieldset. Simply pass said props to Fieldset while the accordion prop is true.

Viable Accordion props include:

  • defaultOpen
  • isOpen
  • toggleOpen
  • onOpen
  • onClose

For more details on the props listed above, visit the Accordion documentation.