Fieldset

Fieldsets group multiple fields together with a label. This is a light wrapper over the native fieldset and legend elements, but makes the legend element easily stylable.

Give Feedback Bundle Size

Account details

Name

Address

Bio

index.tsx

'use client';
import * as React from 'react';
import { Field } from '@base-ui-components/react/field';
import { Fieldset } from '@base-ui-components/react/fieldset';
import { styled } from '@mui/system';

export default function UnstyledFieldsetIntroduction() {
  return (
    <FieldsetRoot>
      <FieldsetLegend>Account details</FieldsetLegend>
      <Field.Root>
        <Field.Label>Name</Field.Label>
        <FieldControl />
      </Field.Root>
      <Field.Root>
        <Field.Label>Address</Field.Label>
        <FieldControl />
      </Field.Root>
      <Field.Root>
        <Field.Label>Bio</Field.Label>
        <FieldControl render={<textarea data-textarea />} />
      </Field.Root>
    </FieldsetRoot>
  );
}

const FieldsetRoot = styled(Fieldset.Root)`
  border: none;
  width: 300px;
`;

const FieldsetLegend = styled(Fieldset.Legend)`
  display: inline-block;
  font-size: 125%;
  font-weight: bold;
  margin-bottom: 10px;
`;

const FieldControl = styled(Field.Control)`
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  padding: 6px;
  margin-bottom: 5px;

  &[data-textarea] {
    min-width: 300px;
    max-width: 300px;
    min-height: 100px;
  }
`;

Installation

Base UI components are all available as a single package.

npm install @base-ui-components/react

Once you have the package installed, import the component.

import { Fieldset } from '@base-ui-components/react/fieldset';

Anatomy

Fieldsets are composed of two components:

<Fieldset.Root /> renders the fieldset element.
<Fieldset.Legend /> renders a label for the fieldset.

<Fieldset.Root>
  <Fieldset.Legend />
</Fieldset.Root>

Usage with Fields

Field components are placed inside the Fieldset component.

<Fieldset.Root>
  <Fieldset.Legend>Account details</Fieldset.Legend>
  <Field.Root>
    <Field.Label>Name</Field.Label>
    <Field.Control />
  </Field.Root>
  <Field.Root>
    <Field.Label>Address</Field.Label>
    <Field.Control />
  </Field.Root>
  <Field.Root>
    <Field.Label>Bio</Field.Label>
    <Field.Control render={<textarea />} />
  </Field.Root>
</Fieldset.Root>

API Reference

FieldsetRoot

The foundation for building custom-styled fieldsets.

Prop	Type	Default	Description
`className`	`union`		Class names applied to the element or a function that returns them based on the component's state.
`render`	`union`		A function to customize rendering of the component.

FieldsetLegend

Renders an element that labels the fieldset.

Prop	Type	Default	Description
`className`	`union`		Class names applied to the element or a function that returns them based on the component's state.
`render`	`union`		A function to customize rendering of the component.

Edit this page on GitHub

Field

Form

Getting started

Components

How-to guides