Textarea

<afp-textarea>

stable

This component uses the light DOM, so its markup and styles are part of the regular document flow.

A textarea component to input and edit multi-line text, useful for capturing longer user-provided content.

<afp-textarea hidelabel></afp-textarea>

<afp-textarea hidelabel></afp-textarea>

<AfpTextarea hidelabel></AfpTextarea>

<AfpTextarea hidelabel></AfpTextarea>

Examples #

Shape #

Use the shape attribute to change a text area's shape.

<div class="afp-stack">
  <afp-textarea label="Rounded" shape="rounded" max="50"></afp-textarea>
  <afp-textarea label="Soft" shape="soft" max="50"></afp-textarea>
  <afp-textarea label="Square" shape="square" max="50"></afp-textarea>
</div>

<div class="afp-stack">
  <afp-textarea [label]="'Rounded'" [shape]="'rounded'" [max]=50></afp-textarea>
  <afp-textarea [label]="'Soft'" [shape]="'soft'" [max]=50></afp-textarea>
  <afp-textarea [label]="'Square'" [shape]="'square'" [max]=50></afp-textarea>
</div>

<div class="afp-stack">
  <AfpTextarea label="Rounded" shape="rounded" max="50"></AfpTextarea>
  <AfpTextarea label="Soft" shape="soft" max="50"></AfpTextarea>
  <AfpTextarea label="Square" shape="square" max="50"></AfpTextarea>
</div>

<div class="afp-stack">
  <AfpTextarea :label="'Rounded'" :shape="'rounded'" :max=50></AfpTextarea>
  <AfpTextarea :label="'Soft'" :shape="'soft'" :max=50></AfpTextarea>
  <AfpTextarea :label="'Square'" :shape="'square'" :max=50></AfpTextarea>
</div>

Sizes #

Use the size attribute to change a textarea's size.

<div class="afp-stack">
  <afp-textarea size="small" label="Small" max="50"></afp-textarea>
  <afp-textarea size="medium" label="Medium" max="50"></afp-textarea>
  <afp-textarea size="large" label="Large" max="50"></afp-textarea>
</div>

<div class="afp-stack">
  <afp-textarea [size]="'small'" [label]="'Small'" [max]=50></afp-textarea>
  <afp-textarea [size]="'medium'" [label]="'Medium'" [max]=50></afp-textarea>
  <afp-textarea [size]="'large'" [label]="'Large'" [max]=50></afp-textarea>
</div>

<div class="afp-stack">
  <AfpTextarea size="small" label="Small" max="50"></AfpTextarea>
  <AfpTextarea size="medium" label="Medium" max="50"></AfpTextarea>
  <AfpTextarea size="large" label="Large" max="50"></AfpTextarea>
</div>

<div class="afp-stack">
  <AfpTextarea :size="'small'" :label="'Small'" :max=50></AfpTextarea>
  <AfpTextarea :size="'medium'" :label="'Medium'" :max=50></AfpTextarea>
  <AfpTextarea :size="'large'" :label="'Large'" :max=50></AfpTextarea>
</div>

Hint #

Use the hint attribute to provide additional guidance or context below the textarea.

<afp-textarea max="50" label="Textarea with hint" hint="Enter your message here. Max 50 characters."></afp-textarea>

<afp-textarea [max]=50 [label]="'Textarea with hint'" [hint]="'Enter your message here. Max 50 characters.'"></afp-textarea>

<AfpTextarea max="50" label="Textarea with hint" hint="Enter your message here. Max 50 characters."></AfpTextarea>

<AfpTextarea :max=50 :label="'Textarea with hint'" :hint="'Enter your message here. Max 50 characters.'"></AfpTextarea>

Placeholder #

Use the placeholder attribute to display hint text inside the textarea before the user enters any content.

<afp-textarea max="50" label="Placeholder" placeholder="Write your message here…"></afp-textarea>

<afp-textarea [max]=50 [label]="'Placeholder'" [placeholder]="'Write your message here…'"></afp-textarea>

<AfpTextarea max="50" label="Placeholder" placeholder="Write your message here…"></AfpTextarea>

<AfpTextarea :max=50 :label="'Placeholder'" :placeholder="'Write your message here…'"></AfpTextarea>

Rows #

Use the rows attribute to set the number of visible rows (height) of the textarea.

<div class="afp-stack">
  <afp-textarea max="50" rows="5" label="Row number: 5"></afp-textarea>
  <afp-textarea max="50" rows="10" label="Row number: 10"></afp-textarea>
  <afp-textarea max="50" rows="15" label="Row number: 25"></afp-textarea>
</div>

<div class="afp-stack">
  <afp-textarea [max]=50 [rows]=5 [label]="'Row number: 5'"></afp-textarea>
  <afp-textarea [max]=50 [rows]=10 [label]="'Row number: 10'"></afp-textarea>
  <afp-textarea [max]=50 [rows]=15 [label]="'Row number: 25'"></afp-textarea>
</div>

<div class="afp-stack">
  <AfpTextarea max="50" rows="5" label="Row number: 5"></AfpTextarea>
  <AfpTextarea max="50" rows="10" label="Row number: 10"></AfpTextarea>
  <AfpTextarea max="50" rows="15" label="Row number: 25"></AfpTextarea>
</div>

<div class="afp-stack">
  <AfpTextarea :max=50 :rows=5 :label="'Row number: 5'"></AfpTextarea>
  <AfpTextarea :max=50 :rows=10 :label="'Row number: 10'"></AfpTextarea>
  <AfpTextarea :max=50 :rows=15 :label="'Row number: 25'"></AfpTextarea>
</div>

Resize #

Use the resize attribute to change the textarea's resizing behavior.

<div class="afp-stack">
  <afp-textarea max="50" label="Both" resize="both"></afp-textarea>
  <afp-textarea max="50" label="None" resize="none"></afp-textarea>
  <afp-textarea max="50" label="Vertically" resize="vertical"></afp-textarea>
  <afp-textarea max="50" label="Horizontally" resize="horizontal"></afp-textarea>
</div>

<div class="afp-stack">
  <afp-textarea [max]=50 [label]="'Both'" [resize]="'both'"></afp-textarea>
  <afp-textarea [max]=50 [label]="'None'" [resize]="'none'"></afp-textarea>
  <afp-textarea [max]=50 [label]="'Vertically'" [resize]="'vertical'"></afp-textarea>
  <afp-textarea [max]=50 [label]="'Horizontally'" [resize]="'horizontal'"></afp-textarea>
</div>

<div class="afp-stack">
  <AfpTextarea max="50" label="Both" resize="both"></AfpTextarea>
  <AfpTextarea max="50" label="None" resize="none"></AfpTextarea>
  <AfpTextarea max="50" label="Vertically" resize="vertical"></AfpTextarea>
  <AfpTextarea max="50" label="Horizontally" resize="horizontal"></AfpTextarea>
</div>

<div class="afp-stack">
  <AfpTextarea :max=50 :label="'Both'" :resize="'both'"></AfpTextarea>
  <AfpTextarea :max=50 :label="'None'" :resize="'none'"></AfpTextarea>
  <AfpTextarea :max=50 :label="'Vertically'" :resize="'vertical'"></AfpTextarea>
  <AfpTextarea :max=50 :label="'Horizontally'" :resize="'horizontal'"></AfpTextarea>
</div>

Prefix and Suffix #

Use the prefix slot to add prefix to the textarea field.

Note:

<afp-textarea label="Prefix" resize="both">
  <span slot="textarea-prefix">Note:</span>
</afp-textarea>

<afp-textarea [label]="'Prefix'" [resize]="'both'">
  <span slot="textarea-prefix">Note:</span>
</afp-textarea>

<AfpTextarea label="Prefix" resize="both">
  <span slot="textarea-prefix">Note:</span>
</AfpTextarea>

<AfpTextarea :label="'Prefix'" :resize="'both'">
  <span slot="textarea-prefix">Note:</span>
</AfpTextarea>

Use the suffix slot to add prefix to the textarea field.

<afp-textarea label="Suffix" resize="both">
  <afp-button 
    slot="textarea-suffix"
    size="small"
    appearance="plain"
  >
      <afp-icon name="send"></afp-icon>
  </afp-button>
</afp-textarea>

<afp-textarea [label]="'Suffix'" [resize]="'both'">
  <afp-button 
    [slot]="'textarea-suffix'"
    [size]="'small'"
    [appearance]="'plain'"
  >
      <afp-icon [name]="'send'"></afp-icon>
  </afp-button>
</afp-textarea>

<AfpTextarea label="Suffix" resize="both">
  <AfpButton 
    slot="textarea-suffix"
    size="small"
    appearance="plain"
  >
      <AfpIcon name="send"></AfpIcon>
  </AfpButton>
</AfpTextarea>

<AfpTextarea :label="'Suffix'" :resize="'both'">
  <AfpButton 
    :slot="'textarea-suffix'"
    :size="'small'"
    :appearance="'plain'"
  >
      <AfpIcon :name="'send'"></AfpIcon>
  </AfpButton>
</AfpTextarea>

Clearable #

Use the clearable attribute to show clear icon button.

<afp-textarea value="Click on the clear button to clear the textarea." rows="5" label="Clearable" clearable></afp-textarea>

<afp-textarea [value]="'Click on the clear button to clear the textarea.'" [rows]=5 [label]="'Clearable'" clearable></afp-textarea>

<AfpTextarea value="Click on the clear button to clear the textarea." rows="5" label="Clearable" clearable></AfpTextarea>

<AfpTextarea :value="'Click on the clear button to clear the textarea.'" :rows=5 :label="'Clearable'" clearable></AfpTextarea>

Required #

Use the required attribute to mark the textarea as mandatory.

<afp-textarea max="50" label="Required" required></afp-textarea>

<afp-textarea [max]=50 [label]="'Required'" required></afp-textarea>

<AfpTextarea max="50" label="Required" required></AfpTextarea>

<AfpTextarea :max=50 :label="'Required'" required></AfpTextarea>

Disabled #

Use the disabled attribute to mark the textarea as disabled.

<afp-textarea max="50" label="Disabled" disabled></afp-textarea>

<afp-textarea [max]=50 [label]="'Disabled'" disabled></afp-textarea>

<AfpTextarea max="50" label="Disabled" disabled></AfpTextarea>

<AfpTextarea :max=50 :label="'Disabled'" disabled></AfpTextarea>

Invalid #

Use the invalid attribute to show that the textarea has an error.

<afp-textarea max="50" label="Invalid textarea" invalid="This field cannot be empty."></afp-textarea>

<afp-textarea [max]=50 [label]="'Invalid textarea'" [invalid]="'This field cannot be empty.'"></afp-textarea>

<AfpTextarea max="50" label="Invalid textarea" invalid="This field cannot be empty."></AfpTextarea>

<AfpTextarea :max=50 :label="'Invalid textarea'" :invalid="'This field cannot be empty.'"></AfpTextarea>

Customization #

Use the clear-icon slot to provide a custom icon for the clear button.

<afp-textarea rows="5" value="Click on the custom clear button to clear the textarea."  label="Clearable with custom icon" clearable>
  <afp-icon slot="clear-icon" name="trash"></afp-icon>
</afp-textarea>

<afp-textarea [rows]=5 [value]="'Click on the custom clear button to clear the textarea.'"  [label]="'Clearable with custom icon'" clearable>
  <afp-icon [slot]="'clear-icon'" [name]="'trash'"></afp-icon>
</afp-textarea>

<AfpTextarea rows="5" value="Click on the custom clear button to clear the textarea."  label="Clearable with custom icon" clearable>
  <AfpIcon slot="clear-icon" name="trash"></AfpIcon>
</AfpTextarea>

<AfpTextarea :rows=5 :value="'Click on the custom clear button to clear the textarea.'"  :label="'Clearable with custom icon'" clearable>
  <AfpIcon :slot="'clear-icon'" :name="'trash'"></AfpIcon>
</AfpTextarea>

Properties

Learn more about properties.

Name Description Reflects

value

value of the textarea field.

Type string

label

label of the textarea field.

Type string

ariaLabel
arialabel

Aria label for the textarea. This is used for accessibility purposes to provide a text alternative for screen readers.

Type string

placeholder

placeholder for the textarea.

Type string

name

name of the textarea, used when submitting form data.

Type string

tooltip

show label tooltip by hover.

Type boolean

disabled

disabled property of the textarea component.

Type boolean

Default false

invalid

The error message displayed when the textarea is invalid. If set, the textarea is shown in an error state with this message.

Type string

hint

hint footer property of textarea.

Type string

required

marks the textarea as required. When true, the textarea must have a value before submission. The textarea label will display an asterisk (*).

Type boolean

Default false

readonly

marks the textarea as readonly.

Type boolean

Default false

indicator

an indicator showing the text area’s maximum character limit.

Type boolean

Default true

hideLabel
hidelabel

hides the label visually

Type boolean

autofocus

autofocus on textarea.

Type boolean

Default false

autocorrect

textarea’s automatic spelling correction.

Type boolean

Default false

autocomplete

list of autocomplete strings

Type string

Default 'off'

max

maximum number of characters allowed in the textarea.

Type number

rows

number of visible rows in the textarea.

Type number

Default 1

textareaTabIndex
textareatabindex

html tabIndex property of textarea

Type number

clearable

enables the clear button.

Type boolean

Default false

resize

textarea resize option.

Type

AfpResize

Name	Description
`NONE`	Disables resizing.
`VERTICAL`	Enables resizing vertically only.
`HORIZONTAL`	Enables resizing horizontally only.
`BOTH`	Enables resizing both horizontally and vertically.

AfpResize

Default AfpResize.BOTH

shape

shape of the textarea

Type

AfpShape

Name	Description
`PILL`	Makes the component circular.
`ROUNDED`	Makes the component rounded.
`SOFT`	Makes the component have soft edges.
`SQUARE`	Makes the component square.

AfpShape

Default AfpShape.ROUNDED

size

size of the textarea

Type

AfpSize

Name	Description
`SMALL`	Small size with compact dimensions.
`MEDIUM`	Medium size with standard dimensions.
`LARGE`	Large size with expanded dimensions.

AfpSize

Default AfpSize.MEDIUM

Events

Learn more about events.

Name	Return	Description
`afp-focus`	`void`	Emitted when the textarea gains focus.
`afp-blur`	`void`	Emitted when the textarea loses focus.
`afp-clear`	`void`	Emitted when the textarea is cleared.
`afp-select`	`string`	afp-select - Emitted when part of textarea gets selected.
`afp-value-changed`	`string`	Emitted when the textarea's value changes.

Slots

Learn more about slots.

Name	Description
`label`	Slot for adding custom label content
`textarea-prefix`	Slot for adding content before the textarea field
`textarea-suffix`	Slot for adding content after the textarea field
`clear-icon`	Slot for the icon of the textarea clear button
`indicator-prefix`	Slot for adding content before the textarea indicator
`indicator-suffix`	Slot for adding content after the textarea indicator

Internationalization

Learn more about internationalization.

Key	Description
`textarea.clear-button.aria-label`	The aria-label of the textarea's clear button.

CSS Parts

Learn more about CSS Parts.

Name	Description	Selector
`base`	The outer wrapper of the component	`::part(base)`
`textarea`	The editable textarea element	`::part(textarea)`
`label`	The container for the textarea's label	`::part(label)`
`label-base`	The base part of the label	`::part(label-base)`
`hint`	The part for the hint message	`::part(hint)`
`hint-base`	The base container for the hint message	`::part(hint-base)`
`invalid`	The part for the invalid message	`::part(invalid)`
`invalid-base`	The base container for the invalid message	`::part(invalid-base)`
`indicator`	The counter indicator	`::part(indicator)`
`field`	The part for the textarea field	`::part(field)`
`disabled`	The part for the disabled state of the textarea	`::part(disabled)`
`actions`	The container for textarea's actions	`::part(actions)`
`clear-icon`	The part for the clear icon	`::part(clear-icon)`
`clear-button`	The part for the clear button	`::part(clear-button)`
`footer`	The footer container for hint, invalid or indicator	`::part(footer)`
`footer-text`	The container for hint and invalid	`::part(footer-text)`

CSS Custom Properties

Name	Description	Default
`--afp-textarea-actions-icon-color`	The color of the textarea action icons.	`--afp-color-bright-50`
`--afp-textarea-indicator-disabled-opacity`	The opacity of the indicator when disabled.	`0.5`
`--afp-input-error-label-color`	The color of the label in the invalid/error state.	`--afp-color-error-500`
`--afp-input-error-border-color`	The border color of the textarea field in the invalid/error state.	`--afp-color-error-500`
`--afp-input-error-message-color`	The color of the error message/indicator in the invalid/error state.	`--afp-color-error-500`

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

Component	CSS Part Prefix
afp-icon	`clear-icon` - The part for the clear icon
afp-button	`clear-button` - The part for the clear button

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/textarea/textarea.js';