Text area

Text areas allow users to enter and edit multi-line text. They typically appear in forms.

Usage

Code

Accessibility

  <sl-text-area aria-label="My favourite subject" value="My favourite subject is..."></sl-text-area>

API

Component has a range of properties to define the experience in different use cases.

Properties

Name	Attribute	Type	Default	Description
`autocomplete`	`autocomplete`	`typeof HTMLTextAreaElement.prototype.autocomplete \| undefined`		Specifies which type of data the browser can use to pre-fill the textarea. NOTE: Declare the type this way so it is backwards compatible with 4.9.5, which we still use in `@sl-design-system/angular`.
`customValidity`	`custom-validity`	`string \| undefined`		The error message to display when the control is invalid.
`dirty`	-	`boolean`	`false`	A control is dirty if the user has changed the value in the UI.
`disabled`	`disabled`	`boolean \| undefined`		Whether the textarea is disabled; when set no interaction is possible.
`form`	-	`HTMLFormElement \| null`		The form associated with the control.
`formValue`	-	`unknown`		The value used when submitting the form.
`labels`	-	`NodeListOf<HTMLLabelElement>` \| null		The labels associated with the control.
`maxLength`	`maxlength`	`number \| undefined`		Maximum length (number of characters).
`minLength`	`minlength`	`number \| undefined`		Minimum length (number of characters).
`name`	`name`	`string \| undefined`		The name of the form control.
`nativeFormValue`	-	`FormValue`		Returns the form value as used in a native `<form>`. This is always a string, File, FormData or null.
`placeholder`	`placeholder`	`string \| undefined`		Placeholder text in the textarea.
`readonly`	`readonly`	`boolean \| undefined`		Whether you can interact with the textarea or if it is just a static, readonly display.
`required`	`required`	`boolean \| undefined`		Whether the textarea is a required field.
`resize`	`resize`	`'none' \| 'vertical' \| 'auto'`	`'vertical'`	The way the textarea can be resized.
`rows`	`rows`	`number \| undefined`		The number of rows the textarea should initially have. If not set, the browser defaults to 2 rows.
`showValid`	`show-valid`	`boolean`	`false`	When set will cause the control to show it is valid after reportValidity is called.
`showValidity`	`show-validity`	`'valid' \| 'invalid' \| undefined`		Whether to show the validity state.
`size`	`size`	`'md' \| 'lg' \| undefined`	`md`	The size of the textarea.
`textarea`	-	`HTMLTextAreaElement`		The textarea in the light DOM.
`touched`	-	`boolean`	`false`	A control is marked touched once the user has triggered a blur event on it.
`valid`	-	`boolean`		Returns whether the form control is valid or not.
`validationMessage`	-	`string`		String representing a localized (by the browser) message that describes the validation constraints that the control does not satisfy (if any). The string is empty if the control is not a candidate for constraint validation, or it satisfies its constraints. For true localization, see `getLocalizedValidationMessage()` instead.
`validity`	-	`ValidityState`		Returns the validity state the control is in.
`validityState`	-	`'valid' \| 'invalid' \| 'pending'`		Returns the current validity state.
`value`	`value`	`unknown \| undefined`	`''`	The value for the textarea.
`wrap`	`wrap`	`'soft' \| 'hard'`	`'soft'`	The way text should be wrapped during form submission.

Methods

Name	Parameters	Return	Description
`focus`		`void`
`getLocalizedValidationMessage`		`string`	This returns a localized validation message. It does not support all `ValidityState` properties, since some require more context than we have here. If you need to support more, you can override this method in your own form control.
`reportValidity`		`boolean`	Returns whether the control is valid. If the control is invalid, calling this will also cause an `invalid` event to be dispatched. After calling this, the control will also report the validity to the user.
`setCustomValidity`	`message: string \| Promise<string>`	`void`	Sets a custom validation message for the form control. If the message is not an empty string, that will make the control invalid. By setting it to an empty string again, you can make the control valid again.

Events

Name	Event type	Description
`sl-blur`	`SlBlurEvent`	Emits when the focus leaves the component.
`sl-change`	`SlChangeEvent<string>`	Emits when the value changes.
`sl-focus`	`SlFocusEvent`	Emits when the component gains focus.
`sl-form-control`	`SlFormControlEvent`	Emits when the form control is added to the DOM.
`sl-update-state`	`SlUpdateStateEvent`	Emits when the UI state (dirty, pristine, touched or untouched) of the form control changes.
`sl-update-validity`	`SlUpdateValidityEvent`	Emits when the validity of the form control changes.
`sl-validate`	`SlValidateEvent`	Emits when the form control can be validated.

Slots

Name	Description
`textarea`	The slot for the textarea element

CSS Properties

Name	Description
`--sl-text-area-rows`	The number of rows initially visible in the textarea

Interactive example