webawesome/docs/pages/components/textarea.md

meta, layout

meta	layout
title description Textarea Textareas collect data from the user and allow multiple lines of text.	component

<wa-textarea></wa-textarea>

import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';

const App = () => <WaTextarea />;

:::tip This component works with standard <form> elements. Please refer to the section on form controls to learn more about form submission and client-side validation. :::

Examples

Labels

Use the label attribute to give the textarea an accessible label. For labels that contain HTML, use the label slot instead.

<wa-textarea label="Comments"></wa-textarea>

import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';

const App = () => <WaTextarea label="Comments" />;

Help Text

Add descriptive help text to a textarea with the help-text attribute. For help texts that contain HTML, use the help-text slot instead.

<wa-textarea label="Feedback" help-text="Please tell us what you think."> </wa-textarea>

import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';

const App = () => <WaTextarea label="Feedback" help-text="Please tell us what you think." />;

Rows

Use the rows attribute to change the number of text rows that get shown.

<wa-textarea rows="2"></wa-textarea>

import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';

const App = () => <WaTextarea rows={2} />;

Placeholders

Use the placeholder attribute to add a placeholder.

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

import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';

const App = () => <WaTextarea placeholder="Type something" />;

Filled Textareas

Add the filled attribute to draw a filled textarea.

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

import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';

const App = () => <WaTextarea placeholder="Type something" filled />;

Disabled

Use the disabled attribute to disable a textarea.

<wa-textarea placeholder="Textarea" disabled></wa-textarea>

import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';

const App = () => <WaTextarea placeholder="Textarea" disabled />;

Sizes

Use the size attribute to change a textarea's size.

<wa-textarea placeholder="Small" size="small"></wa-textarea>
<br />
<wa-textarea placeholder="Medium" size="medium"></wa-textarea>
<br />
<wa-textarea placeholder="Large" size="large"></wa-textarea>

import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';

const App = () => (
  <>
    <WaTextarea placeholder="Small" size="small"></WaTextarea>
    <br />
    <WaTextarea placeholder="Medium" size="medium"></WaTextarea>
    <br />
    <WaTextarea placeholder="Large" size="large"></WaTextarea>
  </>
);

Prevent Resizing

By default, textareas can be resized vertically by the user. To prevent resizing, set the resize attribute to none.

<wa-textarea resize="none"></wa-textarea>

import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';

const App = () => <WaTextarea resize="none" />;

Expand with Content

Textareas will automatically resize to expand to fit their content when resize is set to auto.

<wa-textarea resize="auto"></wa-textarea>

import WaTextarea from '@shoelace-style/shoelace/dist/react/textarea';

const App = () => <WaTextarea resize="auto" />;