<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.

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

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:

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

TypographyProps

The <Labeled> component accept a TypographyProps prop that allows you to pass any prop supported by <Typography>.

<Labeled TypographyProps={{ noWrap: true }}>
   <TextField source="title" />
</Labeled>