All components (244)

Field group

Fields · Fieldset · .amset-fieldset

What it is and when to use it

A group of fields with its label: a real <fieldset>.

When to use it

To group controls that belong together (an address, a payment term, the permissions of a key) so a screen reader says the group before each of them. A <div> with a title above it does not do that.
disabled turns off every field inside at once.
columns spreads the fields over 2, 3 or 4 columns without writing a grid; below 40 rem they go back to one.
hint puts a line of help under the label and hiddenLegend hides the label from view without taking it away from the reader.

When not to

A single field: its own label is enough.
A block with a border and shadow: Card.
A single choice among several: RadioGroup, which is already a group with its label.

Keyboard: it is not focusable; the fields inside are.

Accessibility: it is a <fieldset> with its <legend>: the group role and the group name come for free.

Fine styling: CSS variables --amset-fieldset-*: -gap (between fields), -legend-size, -legend-weight and -legend-color.

What it looks like

Shipping details

We only use them for delivery.

Name

Phone

Address

Postcode

<Fieldset legend="Shipping details" hint="We only use them for delivery." columns={2}>
  <TextField label="Name" />
  <TextField label="Phone" />
  <TextField label="Address" />
  <TextField label="Postcode" />
</Fieldset>

Props

Import it with import { Fieldset } from '@amset/ui'. Required props are marked.

Prop	Type	What it does
`children`required	`ReactNode`	—
`legend`required	`ReactNode`	The group label. It is the `<legend>`: what a screen reader announces before each field inside.
`className`	`string`	Merged with the library classes; it does not replace them.
`columns`	`3 \| 4 \| 2 \| 1`	The group columns. `1` stacks the fields (default); with more they are spread out and go back to one on a narrow screen.
`disabled`	`boolean`	Turns off every field inside at once, like the native `disabled` of a `<fieldset>`.
`hiddenLegend`	`boolean`	Hides the label from view without taking it away from the screen reader.
`hint`	`ReactNode`	A line of help under the label.

It also accepts the attributes of the element it renders: className, style, data-*, aria-* and its events.

CSS variables

These CSS variables are how you adapt it. Declare them on the component's selector, not on :root: the stylesheet redeclares them in the rule itself, and a declaration on the same element always wins.

Variable	Default
`--amset-fieldset-gap`	`var(--amset-space-4)`
`--amset-fieldset-legend-size`	`var(--amset-text-base)`
`--amset-fieldset-legend-weight`	`var(--amset-weight-semibold)`
`--amset-fieldset-legend-color`	`var(--amset-ink)`

How to change it

.amset-fieldset {
  --amset-fieldset-gap: ...;
  --amset-fieldset-legend-size: ...;
}

In the test bench

Every state and variant, to try one at a time, on its page at ui.amset.tech: