ComposerLabel API

API reference docs for the React ComposerLabel component. Learn about the props, CSS, and other APIs of this exported module.

Demos

For examples and details on the usage of this React component, visit the component demo pages:

Chat - Headless composer

Import

import { ComposerLabel } from '@mui/x-chat-headless/composer';
// or
import { ComposerLabel } from '@mui/x-chat-headless';
// or
import { ComposerLabel } from '@mui/x-chat';

Learn about the difference by reading this guide on minimizing bundle size.

A <label> element for the conversation input textarea.

Pair this with Composer.TextArea to create a proper label-for-input association. This lets screen readers announce the label when the textarea receives focus, and lets users click the label to focus the textarea.

const textareaId = useId();

<Composer.Root>
  <Composer.Label htmlFor={textareaId}>
    Ask anything
  </Composer.Label>
  <Composer.TextArea id={textareaId} />
</Composer.Root>

When children is omitted the label text falls back to the locale string composerInputAriaLabel — the same default used by the textarea's own aria-label — so you get consistent announcements without duplication. In that case you may want to visually hide the label while keeping it in the accessibility tree (e.g. via a .sr-only utility class).

Props

Name	Type	Description
children	node	Label text. Falls back to the locale text `composerInputAriaLabel` when omitted, so the default is consistent with the textarea's `aria-label`.
htmlFor	string	The `id` of the textarea this label is associated with. Passed directly to the native `htmlFor` attribute. When provided, the label is semantically linked to the textarea so that clicking the label focuses the input and screen readers announce it on focus.
slotProps	ComposerLabelSlotProps
slots	Partial	See Slots API below for more details.

The component cannot hold a ref.

Slots

Slot name	Class name	Default component	Description
label

Source code

If you did not find the information in this page, consider having a look at the implementation of the component for more detail.