Native Styles

Textarea

<textarea>

Textareas collect data from the user and allow multiple lines of text.

Want to do more? Check out the <wa-textarea> component! 
<label>Textarea <textarea></textarea></label>

Placeholders

Use the placeholder attribute to add a placeholder.

<textarea placeholder="Type something"></textarea>

Appearance

Use the appearence utilities to change the textarea's visual appearance.

<textarea placeholder="Type something" class="wa-filled"></textarea>

Expand with Content

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

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.

In HTML In CSS

Add the following code to the <head> of your page:

<link rel="stylesheet" href="https://early.webawesome.com/[email protected]/dist/styles/native/input.css" />

Add the following code at the top of your CSS file:

@import url('https://early.webawesome.com/[email protected]/dist/styles/native/input.css');

To use all of Web Awesome Native styles, follow the instructions on the Native Styles overview page.

    No results