Textarea

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

<p-textarea></p-textarea>

import PTextarea from 'pure-uikit/dist/react/textarea';

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

Examples

Labels

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

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

import PTextarea from 'pure-uikit/dist/react/textarea';

const App = () => <PTextarea 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.

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

import PTextarea from 'pure-uikit/dist/react/textarea';

const App = () => <PTextarea 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.

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

import PTextarea from 'pure-uikit/dist/react/textarea';

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

Placeholders

Use the placeholder attribute to add a placeholder.

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

import PTextarea from 'pure-uikit/dist/react/textarea';

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

Filled Textareas

Add the filled attribute to draw a filled textarea.

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

import PTextarea from 'pure-uikit/dist/react/textarea';

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

Disabled

Use the disabled attribute to disable a textarea.

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

import PTextarea from 'pure-uikit/dist/react/textarea';

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

Sizes

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

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

import PTextarea from 'pure-uikit/dist/react/textarea';

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

Prevent Resizing

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

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

import PTextarea from 'pure-uikit/dist/react/textarea';

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

Expand with Content

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

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

import PTextarea from 'pure-uikit/dist/react/textarea';

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

Importing

If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.

<script type="module" src="https://cdn.jsdelivr.net/npm/pure-uikit@1.3.13/cdn/components/textarea/textarea.js"></script>

import 'https://cdn.jsdelivr.net/npm/pure-uikit@1.3.13/cdn/components/textarea/textarea.js';

import 'pure-uikit/dist/components/textarea/textarea.js';

import PTextarea from 'pure-uikit/dist/react/textarea';

Slots

Learn more about using slots.

Properties

Learn more about attributes and properties.

Events

Learn more about events.

Methods

Learn more about methods.

Parts

Learn more about customizing CSS parts.