Fieldset

The Fieldset component can be used to create an unstyled fieldset to group several controls within a web form.

Simple Example

The Fieldset should be used with the Legend component.

import { Box } from "@react-md/core/box/Box";
import { Fieldset } from "@react-md/core/form/Fieldset";
import { Form } from "@react-md/core/form/Form";
import { Legend } from "@react-md/core/form/Legend";
import { TextField } from "@react-md/core/form/TextField";
import { type ReactElement } from "react";

export default function SimpleExample(): ReactElement {
  return (
    <Form>
      <Fieldset>
        <Legend>Name</Legend>
        <Box grid gridColumns={1}>
          <TextField
            label="First Name"
            autoCompleteValue="given-name"
            required
          />
          <TextField label="Middle Name" autoCompleteValue="additional-name" />
          <TextField
            label="Last Name"
            autoCompleteValue="family-name"
            required
          />
        </Box>
      </Fieldset>
    </Form>
  );
}

import { Box } from "@react-md/core/box/Box";
import { Fieldset } from "@react-md/core/form/Fieldset";
import { Form } from "@react-md/core/form/Form";
import { Legend } from "@react-md/core/form/Legend";
import { TextField } from "@react-md/core/form/TextField";
import { type ReactElement } from "react";

export default function SimpleExample(): ReactElement {
  return (
    <Form>
      <Fieldset>
        <Legend>Name</Legend>
        <Box grid gridColumns={1}>
          <TextField
            label="First Name"
            autoCompleteValue="given-name"
            required
          />
          <TextField label="Middle Name" autoCompleteValue="additional-name" />
          <TextField
            label="Last Name"
            autoCompleteValue="family-name"
            required
          />
        </Box>
      </Fieldset>
    </Form>
  );
}

Full Width

The Fieldset can span the entire width by enabling the fullWidth prop.

import { Box } from "@react-md/core/box/Box";
import { box } from "@react-md/core/box/styles";
import { Fieldset } from "@react-md/core/form/Fieldset";
import { Form } from "@react-md/core/form/Form";
import { Legend } from "@react-md/core/form/Legend";
import { TextField } from "@react-md/core/form/TextField";
import { type ReactElement } from "react";

export default function FullWidthExample(): ReactElement {
  return (
    <Form className={box({ fullWidth: true })}>
      <Fieldset fullWidth>
        <Legend>Name</Legend>
        <Box grid gridColumns={{ phone: 1, tablet: 3 }}>
          <TextField
            label="First Name"
            autoCompleteValue="given-name"
            required
          />
          <TextField label="Middle Name" autoCompleteValue="additional-name" />
          <TextField
            label="Last Name"
            autoCompleteValue="family-name"
            required
          />
        </Box>
      </Fieldset>
    </Form>
  );
}

import { Box } from "@react-md/core/box/Box";
import { box } from "@react-md/core/box/styles";
import { Fieldset } from "@react-md/core/form/Fieldset";
import { Form } from "@react-md/core/form/Form";
import { Legend } from "@react-md/core/form/Legend";
import { TextField } from "@react-md/core/form/TextField";
import { type ReactElement } from "react";

export default function FullWidthExample(): ReactElement {
  return (
    <Form className={box({ fullWidth: true })}>
      <Fieldset fullWidth>
        <Legend>Name</Legend>
        <Box grid gridColumns={{ phone: 1, tablet: 3 }}>
          <TextField
            label="First Name"
            autoCompleteValue="given-name"
            required
          />
          <TextField label="Middle Name" autoCompleteValue="additional-name" />
          <TextField
            label="Last Name"
            autoCompleteValue="family-name"
            required
          />
        </Box>
      </Fieldset>
    </Form>
  );
}

Floating Legend

Set the floatingLegend prop to true to allow the Legend to float like a Label.

See the Legend demos for more info around this behavior and additional styling available.

import { Box } from "@react-md/core/box/Box";
import { box } from "@react-md/core/box/styles";
import { Fieldset } from "@react-md/core/form/Fieldset";
import { Form } from "@react-md/core/form/Form";
import { Legend } from "@react-md/core/form/Legend";
import { TextField } from "@react-md/core/form/TextField";
import { type ReactElement } from "react";

export default function FloatingLegendExample(): ReactElement {
  return (
    <Form className={box({ fullWidth: true })}>
      <Fieldset fullWidth floatingLegend>
        <Legend floating>Name</Legend>
        <Box grid gridColumns={{ phone: 1, tablet: 3 }} disablePadding>
          <TextField
            placeholder="First Name"
            autoCompleteValue="given-name"
            required
          />
          <TextField
            placeholder="Middle Name"
            autoCompleteValue="additional-name"
          />
          <TextField
            placeholder="Last Name"
            autoCompleteValue="family-name"
            required
          />
        </Box>
      </Fieldset>
    </Form>
  );
}

import { Box } from "@react-md/core/box/Box";
import { box } from "@react-md/core/box/styles";
import { Fieldset } from "@react-md/core/form/Fieldset";
import { Form } from "@react-md/core/form/Form";
import { Legend } from "@react-md/core/form/Legend";
import { TextField } from "@react-md/core/form/TextField";
import { type ReactElement } from "react";

export default function FloatingLegendExample(): ReactElement {
  return (
    <Form className={box({ fullWidth: true })}>
      <Fieldset fullWidth floatingLegend>
        <Legend floating>Name</Legend>
        <Box grid gridColumns={{ phone: 1, tablet: 3 }} disablePadding>
          <TextField
            placeholder="First Name"
            autoCompleteValue="given-name"
            required
          />
          <TextField
            placeholder="Middle Name"
            autoCompleteValue="additional-name"
          />
          <TextField
            placeholder="Last Name"
            autoCompleteValue="family-name"
            required
          />
        </Box>
      </Fieldset>
    </Form>
  );
}