<Labeled>

<Labeled> adds a label on top of its child. It uses the childlabel orsource prop for the label. Use it in Edit and Show views to decorateField components with a label.

Usage

<SimpleShowLayout> and<TabbedShowLayout> already decorate their children with<Labeled>. So you don’t need to use it in most cases.

In a custom Show layout, or in a form, if you want to display a field value with a label, just wrap the Field component with<Labeled>.

import{Show,Labeled,TextField}from'react-admin';import{Card,Stack}from'@mui/material';constBookShow=()=>(<Show><Card><Stack><Labeled><TextFieldsource="title"/></Labeled></Stack></Card></Show>);

Props

Additional props are passed to the underlyingMaterial UI<Stack> element.

children

<Labeled> usually wraps aField component.

<Labeled><TextFieldsource="title"/></Labeled>

But it can wrap any component, as long as you providealabel prop.

<Labeledlabel="My custom label"><Username/></Labeled>

color

Color of the label. Defaults totext.secondary. You can use a hex color string, as well as any color value from the theme:

• primary.main
• secondary.main
• error.main
• warning.main
• info.main
• success.main
• text.primary
• text.secondary
• text.disabled

<Labeledcolor="success.main"><TextFieldsource="title"/></Labeled>

fullWidth

By default, the label is only as wide as the child component. If you want the label to stretch to the full width of the container, set thefullWidth prop totrue.

<LabeledfullWidth><TextFieldsource="title"/></Labeled>

isRequired

If you want to append an asterisk to the label to indicate that the field is required, set theisRequired prop totrue.

<LabeledisRequired><TextFieldsource="title"/></Labeled>

label

<Labeled> uses the humanizedsource prop of its child as the label. So for the following example, the label would be"Title".

<Labeled><TextFieldsource="title"/></Labeled>

<Labeled> uses the i18n layer, so you can translate the label. The message key for a label isresources.{resource}.fields.{source} (e.g.resources.books.fields.title for the element above). Checkthe Translation chapter for more information.

<Labeled> can also use an explicitlabel prop:

import{Show,Labeled,TextField}from'react-admin';import{Card,Stack}from'@mui/material';constBookShow=()=>(<Show><Card><Stack><Labeledlabel="My custom label"><TextFieldsource="title"/></Labeled></Stack></Card></Show>);

A component inside<Labeled> can opt out of label decoration by using thelabel={false} prop.

import{Show,Labeled,TextField}from'react-admin';import{Card,Stack}from'@mui/material';constBookShow=()=>(<Show><Card><Stack><Labeled><TextFieldsource="title"label={false}/></Labeled></Stack></Card></Show>);

sx: CSS API

The<Labeled> component accepts the usualclassName prop. You can also override many styles of the inner components thanks to thesx property (seethesx documentation for syntax and examples). This property accepts the following subclasses:

To override the style of all instances of<Labeled> using theapplication-wide style overrides, use theRaLabeled key.