Textareas collect data from the user and allow multiple lines of text.
<wa-textarea>
component!
<label>Textarea <textarea></textarea></label>
Use the placeholder
attribute to add a placeholder.
<textarea placeholder="Type something"></textarea>
Use the appearence utilities to change the textarea's visual appearance.
<textarea placeholder="Type something" class="wa-filled"></textarea>
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>
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.11/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.11/dist/styles/native/input.css');
To use all of Web Awesome Native styles, follow the instructions on the Native Styles overview page.