PlFieldset

A group of controls that answer one question together, with a name on it. It draws no surface. A grouping is not a sheet, and the sheet already exists.

React

import { PlFieldset, PlTextField } from 'plass-ui';

<PlFieldset legend="Billing address" description="Where the invoice goes.">
  <PlTextField label="Street" />
  <PlTextField label="City" />
</PlFieldset>;

import 'package:plass_ui/plass_ui.dart';

PlFieldset(
  legend: const Text('Billing address'),
  description: const Text('Where the invoice goes.'),
  children: <Widget>[streetField, cityField],
);

Props

Prop	Type	Default	Description
legend	ReactNode	—	What the group is called. It becomes part of the accessible name of every control inside, so it has to read correctly in front of each of them — "Billing address", not "Where should we send it?"
description	ReactNode	—	A line under the legend
disabled	boolean	false	Disables every control inside at once, the way a <fieldset> always has
sizeshared	'xs' | 'sm' | 'md' | 'lg' | 'xl'	'md'	The type scale of the legend and the gap between the controls
children	ReactNode	—	The controls that answer one question together

Prop	Type	Default	Description
children *	List<Widget>	—	The controls that answer one question together
legend	Widget?	—	What the group is called. It becomes part of the accessible name of every control inside, so it has to read correctly in front of each of them — "Billing address", not "Where should we send it?"
description	Widget?	—	A line under the legend
disabled	bool	false	Takes the pointer and the focus away from everything inside, and drains the group. There is no browser-style cascade here
sizeshared	PlassSize	PlassSize.md	The type scale of the legend and the gap between the controls

Every native <fieldset> attribute passes straight through. color is excluded because a fieldset has no surface to colour.

What the shared axes mean across the library is in prop conventions.

The three things it owns

Three things, and nothing else:

• The legend, which becomes part of the accessible name of every control inside. That is why it has to be a phrase that still reads correctly in front of each of them, "Billing address", not "Where should we send it?".
• The gap the controls stand at, on the sheet ladder.
• disabled, which is the one thing only a real <fieldset> can do: it reaches every control inside, including one a component three levels down rendered and never heard of.

It draws no surface and takes no color, variant or elevation. A group of fields is a grouping; put it inside a PlCard or a PlBox when a sheet is wanted.

Examples

disabled

The reason to use a fieldset rather than a <div>. Turning it on takes every control inside out of the tab order and out of the form, without the fieldset knowing what any of them are.

React

import { useState } from 'react';
import { PlCheckbox, PlFieldset, PlSwitch, PlTextField } from 'plass-ui';

export default function FieldsetDisabled() {
  const [same, setSame] = useState(true);

  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <PlSwitch label="Same as shipping address" checked={same} onCheckedChange={setSame} />

      <PlFieldset legend="Billing address" disabled={same}>
        <PlTextField label="Street" fullWidth />
        <PlCheckbox label="This is a business address" />
      </PlFieldset>
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class FieldsetDisabled extends StatefulWidget {
  const FieldsetDisabled({super.key});

  @override
  State<FieldsetDisabled> createState() => _FieldsetDisabledState();
}

class _FieldsetDisabledState extends State<FieldsetDisabled> {
  bool _same = true;

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 340,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        crossAxisAlignment: CrossAxisAlignment.stretch,
        spacing: 16,
        children: <Widget>[
          PlSwitch(
            value: _same,
            onChanged: (bool next) => setState(() => _same = next),
            label: const Text('Same as shipping address'),
          ),
          PlFieldset(
            legend: const Text('Billing address'),
            disabled: _same,
            children: const <Widget>[
              PlTextField(label: Text('Street'), fullWidth: true),
              PlCheckbox(value: false, label: Text('This is a business address')),
            ],
          ),
        ],
      ),
    );
  }
}

size

The legend's type scale and the gap between the controls, on the sheet ladder, the same one a PlCard scores its sections with, because a fieldset is a section of a form rather than a control in one.

React

import { PlFieldset, PlTextField, type PlassSize } from 'plass-ui';

export default function FieldsetSizes() {
  return (
    <div className="grid w-full gap-8 sm:grid-cols-3">
      {(['sm', 'md', 'lg'] as PlassSize[]).map((size) => (
        <PlFieldset key={size} size={size} legend={size} description="A group at this step">
          <PlTextField size={size} label="One" fullWidth />
          <PlTextField size={size} label="Two" fullWidth />
        </PlFieldset>
      ))}
    </div>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class FieldsetSizes extends StatelessWidget {
  const FieldsetSizes({super.key});

  @override
  Widget build(BuildContext context) {
    return Wrap(
      spacing: 24,
      runSpacing: 24,
      children: <Widget>[
        for (final PlassSize size in <PlassSize>[PlassSize.sm, PlassSize.md, PlassSize.lg])
          SizedBox(
            width: 200,
            child: PlFieldset(
              size: size,
              legend: Text(size.name),
              description: const Text('A group at this step'),
              children: <Widget>[
                PlTextField(size: size, label: const Text('One'), fullWidth: true),
                PlTextField(size: size, label: const Text('Two'), fullWidth: true),
              ],
            ),
          ),
      ],
    );
  }
}

Inside a sheet

Two fieldsets on one card is the usual arrangement, and it is what makes the no-surface rule pay: the card is the sheet, and each group is a name and a gap on it.

React

import { PlCard, PlFieldset, PlRadio, PlRadioGroup, PlTextField } from 'plass-ui';

export default function FieldsetOnASheet() {
  return (
    <PlCard className="w-full max-w-md" title="Delivery">
      <div className="flex flex-col gap-6">
        <PlFieldset legend="Where" size="sm">
          <PlTextField size="sm" label="Street" fullWidth />
        </PlFieldset>

        <PlFieldset legend="How fast" size="sm">
          <PlRadioGroup size="sm" defaultValue="standard">
            <PlRadio value="standard" label="Standard" />
            <PlRadio value="express" label="Express" />
          </PlRadioGroup>
        </PlFieldset>
      </div>
    </PlCard>
  );
}

import 'package:flutter/widgets.dart';
import 'package:plass_ui/plass_ui.dart';

class FieldsetOnASheet extends StatefulWidget {
  const FieldsetOnASheet({super.key});

  @override
  State<FieldsetOnASheet> createState() => _FieldsetOnASheetState();
}

class _FieldsetOnASheetState extends State<FieldsetOnASheet> {
  String _speed = 'standard';

  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 400,
      child: PlCard(
        title: const Text('Delivery'),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          spacing: 24,
          children: <Widget>[
            const PlFieldset(
              size: PlassSize.sm,
              legend: Text('Where'),
              children: <Widget>[
                PlTextField(size: PlassSize.sm, label: Text('Street'), fullWidth: true),
              ],
            ),
            PlFieldset(
              size: PlassSize.sm,
              legend: const Text('How fast'),
              children: <Widget>[
                PlRadioGroup<String>(
                  size: PlassSize.sm,
                  value: _speed,
                  onChanged: (String? next) => setState(() => _speed = next ?? 'standard'),
                  options: const <PlRadioOption<String>>[
                    PlRadioOption<String>(value: 'standard', label: Text('Standard')),
                    PlRadioOption<String>(value: 'express', label: Text('Express')),
                  ],
                ),
              ],
            ),
          ],
        ),
      ),
    );
  }
}

Two browser defaults undone

A <fieldset> arrives with a border, padding and a margin of its own, and none of the three is the library's. They are undone.

So is min-width: min-content, which every browser gives a fieldset and nothing else. It is the reason a fieldset holding a wide table refuses to shrink inside a flex row, and min-w-0 is what puts it back.

Differences from the React build

React	Flutter	Why
disabled as the native <fieldset> attribute	the pointer taken away, the focus taken away, the group drained	There is no such cascade in Flutter. This does the three things the attribute actually buys; what it cannot do is make a field inside report itself as unavailable, so a field that has to say so is given its own disabled.
a <fieldset> whose browser border, padding, margin and min-width are undone	a Column	There is nothing to undo.
the legend as part of every control's accessible name	the legend as a heading above a named container	Flutter has no <fieldset>/<legend> pairing to inherit, and prefixing every control's own name would say the group's name once per control.
children	children: List<Widget>	The stack is laid out here, so it counts what it is given.
className, style, native attributes	—	There is no class list and no style attribute to pass through.

Accessibility

• It is a real <fieldset>, which is a group, and the legend names it.
• The legend is a <div> pointed at by aria-labelledby rather than a rendered <legend>. That is Base UI's decision, and it is what makes the group an ordinary flex container: a real <legend> is lifted out of its fieldset's content box by every browser, so a gap would put no space under it at all.
• disabled on the fieldset is the native attribute, so it disables descendants the way the platform does, no context, no prop threading, and nothing to forget on a control that was added later.
• A fieldset with neither legend nor description draws no heading block at all. An empty name is worse than none: it puts a blank in front of every control's own.