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

'use client';

import * as React from 'react';
import * as Field from '@base_ui/react/Field';
import * as Fieldset from '@base_ui/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/react

Once you have the package installed, import the component.

import * as Fieldset from '@base_ui/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

Getting started

Components

How-to guides