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.
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>
);
}
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.
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>
);
}
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.
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>
);
}
Floating Label Options Example
import { type ReactElement } from "react";
export default function FloatingLabelOptionsExample(): ReactElement {
return <></>;
}