Textarea
Textareas collect data from the user and allow multiple lines of text.
<wa-textarea>
component!
<label>Textarea <textarea></textarea></label>
Placeholders Jump to heading
Use the placeholder
attribute to add a placeholder.
<textarea placeholder="Type something"></textarea>
Appearance Jump to heading
Use the appearence utilities to change the textarea's visual appearance.
<textarea placeholder="Type something" class="wa-filled"></textarea>
Expand with Content Jump to heading
You can use field-sizing: content
in browsers that support it to make the textarea grow as the user types:
<textarea placeholder="Type something" style="field-sizing: content"></textarea>
Opting In to Native Textarea Styles Jump to heading
If you want to use the Native Textarea styles without including the entirety of Web Awesome Native Styles, you can include the following CSS files from the Web Awesome CDN.
Add the following code to the <head>
of your page:
<link rel="stylesheet" href="https://early.webawesome.com/webawesome@3.0.0-alpha.12/dist/styles/native/input.css" />
Add the following code at the top of your CSS file:
@import url('https://early.webawesome.com/webawesome@3.0.0-alpha.12/dist/styles/native/input.css');
To use all of Web Awesome Native styles, follow the instructions on the Native Styles overview page.