<Labeled>

<Labeled> adds a label on top of its child. It uses the child label or source prop for the label. Use it in Edit and Show views to decorate Field components with a label.

Labeled

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';

const BookShow = () => (
   <Show>
      <Card>
         <Stack>
            <Labeled>
               <TextField source="title" />
            </Labeled>
         </Stack>
     </Card>
  </Show>
);

Props

Prop Required Type Default Description
children Required Element   The wrapped component
className Optional string   The class name
color Optional string text.secondary The color of the label
fullWidth Optional boolean false Whether to stretch the label to the full width of the container
isRequired Optional boolean false Whether to display an asterisk.
label Optional string   The label. If not set, the label is inferred from the child component
sx Optional SxProps   Custom styles

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

children

<Labeled> usually wraps a Field component.

<Labeled>
   <TextField source="title" />
</Labeled>

But it can wrap any component, as long as you provide a label prop.

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

color

Color of the label. Defaults to text.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
<Labeled color="success.main">
   <TextField source="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 the fullWidth prop to true.

<Labeled fullWidth>
   <TextField source="title" />
</Labeled>

isRequired

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

<Labeled isRequired>
   <TextField source="title" />
</Labeled>

label

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

<Labeled>
   <TextField source="title" />
</Labeled>

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

<Labeled> can also use an explicit label prop:

import { Show, Labeled, TextField } from 'react-admin';
import { Card, Stack } from '@mui/material';

const BookShow = () => (
   <Show>
      <Card>
         <Stack>
            <Labeled label="My custom label">
               <TextField source="title" />
            </Labeled>
         </Stack>
     </Card>
  </Show>
);

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

import { Show, Labeled, TextField } from 'react-admin';
import { Card, Stack } from '@mui/material';

const BookShow = () => (
   <Show>
      <Card>
         <Stack>
            <Labeled>
               <TextField source="title" label={false} />
            </Labeled>
         </Stack>
     </Card>
  </Show>
);

sx: CSS API

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

Rule name Description
&.RaLabeled-fullWidth Applied to the root component
& .RaLabeled-label Applied to the underlying Material UI’s Typography component

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