cnc-fieldset
A titled group of form fields that can collapse. It is two things at once: a header — label, optional description, an optional arrow or checkbox toggle, a rule across the remaining width — and a responsive grid that lays the fields out in columns on its own.
Quick start
Give it a label and put the fields in the default slot. The body is
open
— a fieldset is a grouping, not a disclosure. Pass
open="false"
for the collapsed start, and
toggle
to offer the control that closes it. See
the note below.
<cnc-fieldset label="User information">
<cnc-input name="first" label="First name"></cnc-input>
<cnc-input name="last" label="Last name"></cnc-input>
</cnc-fieldset>Usage guidance
Group the fields of a long form so each section can be read on its own, and give the sections
that are optional a toggle. Always pass open to the ones that are not optional
— a collapsed group with no toggle is a group nobody can fill in.
For a settings page where each section wants its label and description in a column beside the
fields, reach for
variant="spaced"
above — same widget, same properties.
cnc-fieldset-spaced
is the standalone widget of the same shape, and stays for markup that already names it. For
collapsible content that is not a form, use
cnc-details
or cnc-accordion: this one's body is a field grid, and arbitrary content will be
laid out in columns whether it suits it or not.