COMPONENTS / ATOMS / al-textarea← ALL COMPONENTS

Textarea

<al-textarea><ALTextarea> REACTbeta

Reference generated from the custom elements manifest — 21 properties, 4 slots, 1 events.

PLAYGROUND10 CONTROLS

PREVIEW / al-textarea / SOUTHLEFT

Loading preview

FLAGS

ICON SLOTS

CODE — HTML / REACT

Guidance

NOT YET AUTHORED · 20 COMPONENTS COVERED

NO USAGE GUIDANCE HAS BEEN WRITTEN FOR THIS COMPONENT YET. THE API BELOW IS GENERATED FROM THE MANIFEST AND IS COMPLETE; WHAT IS MISSING IS WHEN TO REACH FOR IT AND WHEN NOT TO.

FIGMA PARITYNOT TRACKED

NO DESIGN-SYSTEM PROJECT TRACKS THIS COMPONENT AGAINST A FIGMA FILE — IT IS EITHER OUTSIDE EVERY PROJECT’S DECLARED SCOPE, OR NOT YET SEEDED INTO ITS PROJECT’S PARITY MANIFEST.

ACCESSIBILITYAXE 4.12.1

CHECKEVIDENCEDETAILRESULT

Default stateAXEtextarea--DefaultPASS

Advanced statesAXE14 further storiesPASS

Screen readerMANUALNo screen-reader pass has been recorded for this component.NOT RECORDED

Keyboard navigationINTERACTION TESTSNo interaction tests and no manual keyboard pass.NOT RECORDED

MEASURED 2026-09-08 · 15 STORIES · AXE WCAG2A + WCAG2AA + WCAG21A + WCAG21AA + WCAG22AA

COLOR CONTRAST1 RULE FAILING

The CI gate disables color-contrast globally (libs/al-web-components/story-fixture/src/main.ts), so its result never reaches a test run. It is enabled for this measurement, and reported here whichever way it comes out.

RULEWHEREELEMENTS

color-contrastElements must meet minimum color contrast ratio thresholdstextarea--Disabled1

INSTALL@southleft/al-web-components/components/textarea

import '@southleft/al-web-components/components/textarea';
import { ALTextarea } from '@southleft/al-react';

API — 21 PROPS21 DOCUMENTED

PROPTYPEDEFAULT

rowsnumberRows attribute - Specifies the visible number of lines in a text area1

colsnumberCols attribute - Specifies the visible width of a text area—

isActivebooleanisActive - Dynamically sets to true if the textarea has a value—

isReadonlybooleanReadonly attribute - Specifies that an input field is read-only—

isErrorbooleanError state - Changes the component's treatment to represent an error state—

isDisabledbooleanDisabled attribute - Changes the component's treatment to represent a disabled state—

isRequiredbooleanRequired attribute - Specifies that an input field must be filled out before submitting the form—

isOptionalbooleanOptional state - Specifies that a field is optional and adds the text 'optional' to the label—

isFocusedbooleanAutofocus attribute - When present, it specifies that the text area should automatically get focus when the page loads—

hideLabelbooleanHide label? - If true, hides the label VISUALLY. The element stays in the DOM with its `for` association intact, so the field keeps an accessible name. Before v2 this also revealed the placeholder; the label no longer occupies the placeholder's position, so a `placeholder` renders whenever it is set.—

labelstringLabel attribute - Specifies what content to enter within the input element'Label'

placeholderstringPlaceholder attribute - Specifies a short hint that describes the expected value of an input element—

namestringName attribute - Specifies the name of an input element—

valuestringValue attribute - Specifies the value of an input element—

errorNotestringError message - An error field note that displays below the input—

fieldNotestringField note - The helper text that displays below the input—

fieldIdstringId attribute - The ID used for A11y and to associate the label with the input—

ariaDescribedBystringaria-describedby attribute - Applied to the field note or error note for A11y—

minLengthnumberMin length - Specifies the minimum number of characters required in an input element—

maxLengthnumberMax length - Specifies the maximum number of characters required in an input element—

maxLengthValuenumberMaxlength value - Dynamically outputs the number of characters inside the input field—

SLOTS4

SLOTDESCRIPTION

beforeThe content that appears before the text in the input

afterThe content that appears after the text in the input

field-noteIf content is slotted, it will display in place of the fieldNote property

errorIf content is slotted, it will display in place of the errorNote property

EVENTS1

EVENTDESCRIPTIONTYPE

onTextareaChangeFired when the textarea's value changes. Detail: `{ value }`.CustomEvent

PUBLIC METHODS2

METHODDESCRIPTION

handleOnChange()Handle on change events 1. Update the maxlengthValue as text is being inputted in the field 2. If the value is greater than zero, then set active to true to move the label above the textarea 3. If the value is less than zero, then set active to false and move the label back to its original position 4. Dispatch the custom event

setInputPadding()Set textarea padding 1. Set the padding-left for the Textarea based on the before slotted content 2. Set the padding-right for the Textarea based on the after slotted content

SOURCE — components/textarea/textarea.ts · Atoms/Form/Textarea