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';
// or
import { ComposerLabel } from '@mui/x-chat/headless';

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

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.