mirror
/
shoelace
kopia lustrzana https://github.com/shoelace-style/shoelace
1
0
Forkuj 0
Kod Zgłoszenia Packages Projekty Wydania Wiki Aktywność
shoelace/docs/components/textarea.md

102 wiersze
2.2 KiB
Markdown
Czysty Zwykły widok Historia

2.0 cleanup
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.
## Examples
Reorder examples
2020-08-25 20:23:33 +00:00
### Rows
2.0 cleanup
2020-07-15 21:30:37 +00:00
Reorder examples
2020-08-25 20:23:33 +00:00
Use the `rows` attribute to change the number of text rows that get shown.
2.0 cleanup
2020-07-15 21:30:37 +00:00
```html preview
Reorder examples
2020-08-25 20:23:33 +00:00
<sl-textarea rows="2"></sl-textarea>
2.0 cleanup
2020-07-15 21:30:37 +00:00
```
Reorder examples
2020-08-25 20:23:33 +00:00
### Placeholders
2.0 cleanup
2020-07-15 21:30:37 +00:00
Reorder examples
2020-08-25 20:23:33 +00:00
Use the `placeholder` attribute to add a placeholder.
2.0 cleanup
2020-07-15 21:30:37 +00:00
```html preview
Reorder examples
2020-08-25 20:23:33 +00:00
<sl-textarea placeholder="Type something"></sl-textarea>
2.0 cleanup
2020-07-15 21:30:37 +00:00
```
Reorder examples
2020-08-25 20:23:33 +00:00
### Disabled
2.0 cleanup
2020-07-15 21:30:37 +00:00
Reorder examples
2020-08-25 20:23:33 +00:00
Use the `disabled` attribute to disable an input.
2.0 cleanup
2020-07-15 21:30:37 +00:00
```html preview
Reorder examples
2020-08-25 20:23:33 +00:00
<sl-textarea placeholder="Textarea" disabled></sl-textarea>
2.0 cleanup
2020-07-15 21:30:37 +00:00
```
Reorder examples
2020-08-25 20:23:33 +00:00
### Sizes
2.0 cleanup
2020-07-15 21:30:37 +00:00
Reorder examples
2020-08-25 20:23:33 +00:00
Use the `size` attribute to change a textarea's size.
2.0 cleanup
2020-07-15 21:30:37 +00:00
```html preview
Reorder examples
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>
2.0 cleanup
2020-07-15 21:30:37 +00:00
```
Reorder examples
2020-08-25 20:23:33 +00:00
### Labels
2.0 cleanup
2020-07-15 21:30:37 +00:00
Reorder examples
2020-08-25 20:23:33 +00:00
Use the `label` attribute to give the textarea an accessible label.
2.0 cleanup
2020-07-15 21:30:37 +00:00
```html preview
Reorder examples
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>
2.0 cleanup
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]