2020-07-15 21:30:37 +00:00
# Textarea
[component-header:sl-textarea]
Textareas collect data from the user and allow multiple lines of text.
```html preview
< sl-textarea > < / sl-textarea >
```
?> This component doesn't work with standard forms. Use [`<sl-form>` ](/components/form.md ) instead.
2020-08-28 20:14:39 +00:00
?> Please refer to the section on [form control validation ](/components/form?id=form-control-validation ) to learn how to do client-side validation.
2020-07-15 21:30:37 +00:00
## Examples
2020-08-25 20:23:33 +00:00
### Rows
2020-07-15 21:30:37 +00:00
2020-08-25 20:23:33 +00:00
Use the `rows` attribute to change the number of text rows that get shown.
2020-07-15 21:30:37 +00:00
```html preview
2020-08-25 20:23:33 +00:00
< sl-textarea rows = "2" > < / sl-textarea >
2020-07-15 21:30:37 +00:00
```
2020-08-25 20:23:33 +00:00
### Placeholders
2020-07-15 21:30:37 +00:00
2020-08-25 20:23:33 +00:00
Use the `placeholder` attribute to add a placeholder.
2020-07-15 21:30:37 +00:00
```html preview
2020-08-25 20:23:33 +00:00
< sl-textarea placeholder = "Type something" > < / sl-textarea >
2020-07-15 21:30:37 +00:00
```
2020-08-25 20:23:33 +00:00
### Disabled
2020-07-15 21:30:37 +00:00
2020-08-25 20:23:33 +00:00
Use the `disabled` attribute to disable an input.
2020-07-15 21:30:37 +00:00
```html preview
2020-08-25 20:23:33 +00:00
< sl-textarea placeholder = "Textarea" disabled > < / sl-textarea >
2020-07-15 21:30:37 +00:00
```
2020-08-25 20:23:33 +00:00
### Sizes
2020-07-15 21:30:37 +00:00
2020-08-25 20:23:33 +00:00
Use the `size` attribute to change a textarea's size.
2020-07-15 21:30:37 +00:00
```html preview
2020-08-25 20:23:33 +00:00
< sl-textarea placeholder = "Small" size = "small" > < / sl-textarea >
< br >
< sl-textarea placeholder = "Medium" size = "medium" > < / sl-textarea >
< br >
< sl-textarea placeholder = "Large" size = "large" > < / sl-textarea >
2020-07-15 21:30:37 +00:00
```
2020-08-25 20:23:33 +00:00
### Labels
2020-07-15 21:30:37 +00:00
2020-08-25 20:23:33 +00:00
Use the `label` attribute to give the textarea an accessible label.
2020-07-15 21:30:37 +00:00
```html preview
2020-08-25 20:23:33 +00:00
< sl-textarea label = "Comments" > < / sl-textarea >
```
### Help Text
Add descriptive help text to a textarea with the `help-text` slot.
```html preview
< sl-textarea label = "Feedback" >
< div slot = "help-text" > Please tell us what you think.< / div >
< / sl-textarea >
2020-07-15 21:30:37 +00:00
```
### Validation
Show a valid or invalid state by setting the `valid` and `invalid` attributes, respectively. Help text can be used to provide feedback for validation and will be styled accordingly.
```html preview
< sl-textarea label = "Valid" valid >
< div slot = "help-text" > This is a valid textarea.< / div >
< / sl-textarea >
< br >
< sl-textarea label = "Invalid" invalid >
< div slot = "help-text" > This is an invalid textarea.< / div >
< / sl-textarea >
```
### Prevent Resizing
By default, textareas can be resized vertically by the user. To prevent resizing, set the `resize` attribute to `none` .
```html preview
< sl-textarea resize = "none" > < / sl-textarea >
```
### Expand with Content
Textareas will automatically resize to expand to fit their content when `resize` is set to `auto` .
```html preview
< sl-textarea resize = "auto" > < / sl-textarea >
```
[component-metadata:sl-textarea]