OverviewIntroductionIntroductionUsageUsageThemeThemeLayoutBoxBoxContainerContainerFlexFlex GridGridSectionSectionTypographyTextText HeadingHeadingComponentsAccordionAccordionAlert DialogAlert DialogAvatarAvatarBadgeBadgeBlockquoteBlockquoteButtonButton CalloutCallout CardCard CheckboxCheckbox ChipChip Code BlockCode Block Code EditorCode Editor Color FieldColor Field Data ListData ListDefinition ListDefinition ListDialogDialogHover CardHover CardIcon ButtonIcon Button InsetInset Image FieldImage Field LabelLabel MarkerMarkerPermanent LinkPermanent LinkPopoverPopoverProgressProgressRadio Card GroupRadio Card GroupScreenshotScreenshotScroll AreaScroll AreaSegmented ControlSegmented ControlSelectSelectSeparatorSeparator SkeletonSkeleton SpinnerSpinner StatusStatus SwitchSwitch TableTableTabsTabsText AreaText Area Text FieldText FieldTooltipTooltipZoomableZoomableFormattingCodeCodeEmEmKbdKbdQuoteQuoteStrongStrongIconsLogo IconLogo IconFeature IconFeature IconProvider IconProvider IconIcon PanelIcon PanelNavigationPage NavPage NavQuick NavQuick NavUtilitiesDesign System ProviderDesign System ProviderRecipesCopy ButtonCopy Button Copy ChipCopy Chip Theme ToggleTheme Toggle

Text Area

Displays a multi-line text field input.

 <TextArea placeholder="Text Area" />

API Reference

Prop	Type	Default
`invalid`	`boolean`	`false`
`size`	`"1" \| "2" \| "3"`	`"2"`
`variant`	`"classic" \| "surface" \| "soft"`	`"classic"`

This component is based on the textarea element and supports common margin props m, mx, my, ml, mr, mt, mb. View source

Examples

Variants

Use the variant prop to control the visual style of the Text Area.

 <Grid columns={{ md: '3' }} gap="3">
  <TextArea variant="classic" placeholder="Classic" />
  <TextArea variant="surface" placeholder="Surface" />
  <TextArea variant="soft" placeholder="Soft" />
</Grid>

States

The state prop is deprecated, as the types of state it represents may not be mutually exclusive. Use disabled, readOnly or invalid instead.

The invalid prop indicates that the field’s value is invalid. Fields are styled as valid by default, though built-in client-side validation still applies. In a future version we may synchronize styled validation with the field’s internal validity state.

 <Flex direction="column" gap="3" maxWidth="400px">
  <TextArea defaultValue="Valid" />
  <TextArea defaultValue="Invalid" invalid />
</Flex>