Displays a textarea.
| 1 |
<textarea placeholder="Type something..."></textarea> |
Import
@import "@webtui/css/components/textarea.css";
Usage
<textarea></textarea>
Examples
Sizing
| 1 |
|
| 2 |
<textarea size-="small" placeholder="Small textarea"></textarea> |
| 3 |
<textarea placeholder="Default textarea"></textarea> |
| 4 |
<textarea size-="large" placeholder="Large textarea"></textarea> |
| 5 |
|
| 1 |
|
| 2 |
body { |
| 3 |
display: flex; |
| 4 |
flex-direction: column; |
| 5 |
gap: 1lh; |
| 6 |
} |
Reference
Extending
To customize textarea styles, extend the component using @layer components:
@layer components {
textarea,
[is-~="textarea"] {
&[size-="thicc"] {
min-height: 6lh;
padding: 2lh 4ch;
}
/* Add more custom styles here */
}
}
Scope
- All native
<textarea> elements
- Any element with
is-~="textarea"
textarea,
[is-~="textarea"] {
/* ... */
}