Component Blueprints

Textarea

Lightning Component
  • HTML/CSS:Dev Ready
  • Web Component:True
  • Layout:Responsive

Sections

Textarea inputs are used for freeform data entry.

About Textarea#

You can style the HTML <textarea> element to align with the Salesforce brand by using the class .slds-textarea on the <textarea> element.

Base#

<div class="slds-form-element">
  <label class="slds-form-element__label" for="textarea-id-01">Textarea Label</label>
  <div class="slds-form-element__control">
    <textarea id="textarea-id-01" placeholder="Placeholder text…" class="slds-textarea"></textarea>

States#

Disabled#

<div class="slds-form-element">
  <label class="slds-form-element__label" for="textarea-id-01">Textarea Label</label>
  <div class="slds-form-element__control">
    <textarea id="textarea-id-01" disabled="" placeholder="Placeholder text…" class="slds-textarea"></textarea>

Required#

<div class="slds-form-element">
  <label class="slds-form-element__label" for="textarea-id-01">
    <abbr class="slds-required" title="required">* </abbr>Textarea Label</label>
  <div class="slds-form-element__control">

Error#

Enter a value.
<div class="slds-form-element slds-has-error">
  <label class="slds-form-element__label" for="textarea-id-01">
    <abbr class="slds-required" title="required">* </abbr>Textarea Label</label>
  <div class="slds-form-element__control">

Read only#

Textarea Label

Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Nullam quis risus eget urna mollis ornare vel eu leo. Vestibulum id ligula porta felis euismod semper. Donec ullamcorper nulla non metus auctor fringilla. Maecenas faucibus mollis interdum.

<div class="slds-form-element">
  <span class="slds-form-element__label">Textarea Label</span>
  <div class="slds-form-element__control slds-border_bottom">
    <div class="slds-form-element__static">

Styling Hooks Overview#

Use these CSS Custom Properties as hooks to customize this SLDS component with your own style. For more information, read the technical documentation.

CategoryStyling Hook NameValue Type(s)Fallback Value
Box Shadow
--slds-c-textarea-shadow
String
--slds-c-textarea-shadow-focus
String0 0 3px #0176d3
Color
--slds-c-textarea-color-background
Colorwhite
--slds-c-textarea-color-background-error-focus
Colorwhite
--slds-c-textarea-color-background-focus
Colorwhite
--slds-c-textarea-color-border
Color#c9c9c9
--slds-c-textarea-color-border-focus
Color#1b96ff
--slds-c-textarea-text-color
Color
--slds-c-textarea-text-color-error-focus
Color
--slds-c-textarea-text-color-focus
Color
Radius
--slds-c-textarea-radius-border
Dimension0.25rem
Sizing
--slds-c-textarea-sizing-min-height
Dimension
Spacing
--slds-c-textarea-spacing-block-end
Dimension0.5rem
--slds-c-textarea-spacing-block-start
Dimension0.5rem
--slds-c-textarea-spacing-inline-end
Dimension0.75rem
--slds-c-textarea-spacing-inline-start
Dimension0.75rem

Overview of CSS Classes#

Selector.slds-textarea
Summary

Initialize textarea

Supportdev-ready
Restricttextarea
VariantTrue

Textarea Release Notes

2.17.0

Added

  • Added slds as the default namespace with sds fallbacks for Styling Hooks.
  • Added CSS Custom Property reassignments for variants and states

2.14.0

Added

  • Enabled styling hooks for textarea. See textarea's styling hooks overview table for a full listing of the currently available hooks.

2.13.1

Fixed

  • Small improvements to the UI text.

2.7.0

Fixed

  • Removed box-shadow added by Firefox for all required fields.
    • By default, Firefox was adding a box-shadow to all fields marked required. This has now been normalized to match the styling in all other browsers.