Skip to main content
react-md

Legend

The Legend component can be used to create a legend within a Fieldset that acts like a floating label or is visible to screen readers only.

Simple Example

The Legend should be used within a Fieldset or <fieldset> and does not apply any custom styles by default.

I am legend
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>I am legend</Legend>
        <Box>
          <TextField label="Field 1" />
          <TextField label="Field 2" />
          <TextField label="Field 3" />
        </Box>
      </Fieldset>
    </Form>
  );
}

Press Enter to start editing.

Screen Reader Only Example

When related form controls should be grouped together within a form but the legend should not be visible, enable the srOnly prop to make it visible to screen readers only.

I am legend
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 SrOnlyExample(): ReactElement {
  return (
    <Form>
      <Fieldset>
        <Legend srOnly>I am legend</Legend>
        <Box>
          <TextField label="Field 1" />
          <TextField label="Field 2" />
          <TextField label="Field 3" />
        </Box>
      </Fieldset>
    </Form>
  );
}

Press Enter to start editing.

Floating Label Example

The Legend can act as a floating label by enabling the floating prop on the Legend and floatingLabel on the parent Fieldset.

I am legend
import { box, boxStyles } 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 FloatingLabelExample(): ReactElement {
  return (
    <Form className={box({ fullWidth: true })}>
      <Fieldset
        floatingLegend
        {...boxStyles({
          grid: true,
          fullWidth: true,
          gridColumns: { phone: 1 },
          gridItemSize: { tablet: "8rem" },
        })}
      >
        <Legend floating>I am legend</Legend>
        <TextField placeholder="Field 1" />
        <TextField placeholder="Field 2" />
        <TextField placeholder="Field 3" />
      </Fieldset>
    </Form>
  );
}

Press Enter to start editing.

Floating Label Options Example

When the floating prop is enabled, the following Label props can be provided:

I am legend
Form Theme
import { box, boxStyles } from "@react-md/core/box/styles";
import { Divider } from "@react-md/core/divider/Divider";
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 { Radio } from "@react-md/core/form/Radio";
import { TextField } from "@react-md/core/form/TextField";
import { type FormTheme } from "@react-md/core/form/types";
import { useRadioGroup } from "@react-md/core/form/useRadioGroup";
import { typography } from "@react-md/core/typography/typographyStyles";
import FavoriteIcon from "@react-md/material-icons/FavoriteIcon";
import { type ReactElement } from "react";

export default function FloatingLabelOptionsExample(): ReactElement {
  const { value: theme, getRadioProps } = useRadioGroup<FormTheme>({
    name: "theme",
    defaultValue: "outline",
  });
  return (
    <Form className={box({ fullWidth: true })}>
      <Fieldset
        floatingLegend
        {...boxStyles({
          grid: true,
          fullWidth: true,
          gridColumns: { phone: 1 },
          gridItemSize: { tablet: "8rem" },
        })}
      >
        <Legend
          floating
          theme={theme}
          // active
          gap
          // error
          // stacked
          // disabled
          // reversed
        >
          I am legend
          <FavoriteIcon theme="currentcolor" />
        </Legend>
        <TextField placeholder="Field 1" theme={theme} />
        <TextField placeholder="Field 2" theme={theme} />
        <TextField placeholder="Field 3" theme={theme} />
      </Fieldset>
      <Divider />
      <Fieldset
        fullWidth
        className={box({ align: "start", stacked: true, disableGap: true })}
      >
        <Legend>Form Theme</Legend>
        {themes.map((theme) => (
          <Radio
            key={theme}
            {...getRadioProps(theme)}
            label={theme}
            className={typography({ type: null, textTransform: "capitalize" })}
          />
        ))}
      </Fieldset>
    </Form>
  );
}

const themes: readonly FormTheme[] = ["underline", "filled", "outline"];

Press Enter to start editing.