TextAreaField

A multi-line text input with label, description, and validation.

Message

Usage#

import { TextAreaField } from '@backstage/ui';

<TextAreaField label="Message" />

API reference#

Prop	Type	Default	Description
label	string	-	Visible label displayed above the text area.
secondaryLabel	string	-	Secondary text shown next to the label. If not provided and isRequired is true, displays Required.
description	string	-	Help text displayed below the label.
size	smallmedium	small	Visual size of the text area. Use small for dense layouts, medium for prominent fields.
rows	number	3	Number of visible text lines, controlling the initial and minimum height.
placeholder	string	-	Text displayed when the text area is empty.
name	string	-	Form field name for submission.
isRequired	boolean	-	Whether the field is required for form submission.
isDisabled	boolean	-	Whether the text area is disabled.
isReadOnly	boolean	-	Whether the text area is read-only.
value	string	-	Controlled value of the text area.
defaultValue	string	-	Default value for uncontrolled usage.
onChange	(value: string) => void	-	Handler called when the text area value changes.
className	string	-	Additional CSS class name for custom styling.
style	CSSProperties	-	Inline CSS styles object.

Inherits all React Aria TextField props.

Examples#

Sizes#

<Flex direction="column" gap="4">
  <TextAreaField size="small" label="Small" placeholder="Enter a message" />
  <TextAreaField size="medium" label="Medium" placeholder="Enter a message" />
</Flex>

Small

Medium

With description#

<TextAreaField
  name="message"
  placeholder="Enter a message"
  label="Message"
  description="Share as much detail as you like."
/>

Message

Share as much detail as you like.

Theming#

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

bui-TextAreaField
bui-TextArea