FieldSet

A labelled form field with optional description, error message, and value badge, in column or row layout.

FieldSet is a client component that renders a fieldset containing a label, a Reactberry Field, and optional description and error text. Use it for labelled form inputs, selects, and textareas. It forwards its ref to the Field.

Work email *

Used for sign-in and notifications.

Enter a valid email

Import#

typescript

import { FieldSet } from "@reactberry/system/blocks";

Usage#

typescript

import { useState, type ChangeEvent } from "react";
import { FieldSet } from "@reactberry/system/blocks";
import { Box } from "@reactberry/system/elements";

export default function ProfileForm() {
  const [email, setEmail] = useState("");
  const error = email && !email.includes("@") ? "Enter a valid email" : undefined;

  return (
    <Box as="form" display="flex" flexDirection="column" gap="m">
      <FieldSet
        name="email"
        label="Email"
        description="Used for sign-in and notifications."
        type="email"
        placeholder="you@example.com"
        value={email}
        onChange={(e: ChangeEvent<HTMLInputElement>) => setEmail(e.target.value)}
        error={error}
        required
      />
    </Box>
  );
}

Examples#

Row layout#

Set layout="row" to place the label to the left. labelWidth gives every label the same width so the fields line up.

City

Postcode

Select#

Set as="select" and pass option elements as children.

Role

Editors can change content; viewers can only read it.

Live value badge#

Pass the current value to watch to show it in a badge next to the field, for example for a range input.

Notification volume

API#

FieldSet#

Prop	Type	Default	Description
`name*`	`string`	—	Used as the field `name` and `id`, and as the label `htmlFor`.
`label*`	`string \| ReactNode`	—	Label content. When `required` is set, `" *"` is appended.
`description`	`string`	—	Helper text rendered between the label and the field.
`error`	`any`	—	Rendered below the field in red when truthy.
`required`	`boolean`	—	Adds the `" *"` marker to the label. It is not forwarded to the field.
`watch`	`any`	—	When truthy, renders the value in a small badge to the right of the field.
`as`	`React.ElementType`	`"input"`	Element rendered by `Field`, for example `"textarea"` or `"select"`.
`children`	`ReactNode`	—	Rendered inside the field only when `as` is set to something other than `"input"`, for example `option` elements for a `select`.
`layout`	`"column" \| "row"`	`"column"`	Stacks the label above the field, or places it to the left.
`fontSize`	`string \| number`	`"medium"`	Applied to the label `fontSize` and to the field `$size`.
`labelWidth`	`string \| number`	—	Label width in row layout. When set, the label does not flex.
`containerProps`	`{ [key: string]: any }`	`{}`	Spread onto the outer `fieldset` `Box`.

All remaining props (for example type, value, onChange, placeholder, disabled) are spread onto the Field, after its defaults of variant="default" and width="100%".

Accessibility#

The outer element is a native fieldset, and the label is a label element whose htmlFor matches the field id (name).
The fieldset has no legend.
The error text is not linked to the field with aria-describedby, and the field does not receive aria-invalid. Pass these through the spread props if needed.
required only adds a visual " *" marker; pass aria-required through the spread props if needed.

Notes#

The description uses fontSize="xsmall" in column layout and fontSize="small" in row layout.
watch is checked for truthiness, so a value of 0 hides the badge.