Layout

Fieldset

Groups related fields under a legend and can collapse.

Features4

API

Theming

Basic

legend names the group; screen readers read it with every field inside.

Contact

6 lines

<tx-fieldset legend="Contact">  <div class="fields">    <input txInput aria-label="Name" placeholder="Name" />    <input txInput aria-label="Email" placeholder="Email" type="email" />  </div></tx-fieldset>

Toggleable

toggleable turns the legend into a button; [(collapsed)] holds the state.

Expanded

7 lines

<tx-fieldset legend="Billing address" [toggleable]="true" [(collapsed)]="collapsed">  <div class="fields">    <input txInput aria-label="Street" placeholder="Street" />    <input txInput aria-label="City" placeholder="City" />  </div></tx-fieldset><p class="status">{{ collapsed() ? 'Collapsed' : 'Expanded' }}</p>

Legend template

[txFieldsetLegend] replaces the legend text with own content.

10 lines

<tx-fieldset [toggleable]="true">  <span txFieldsetLegend class="legend"><tx-icon name="lock" /> Security</span>  <input    txInput    aria-label="Recovery email"    placeholder="Recovery email"    type="email"    class="input"  /></tx-fieldset>

Design tokens

dt changes the look of one fieldset.

Notes

6 lines

<tx-fieldset  legend="Notes"  [dt]="{ root: { borderRadius: '4px', background: 'transparent', legendFontWeight: '500' } }">  <input txInput aria-label="Note" placeholder="Note" class="input" /></tx-fieldset>