Text Area

Usage

No props are required to display <TextArea>, but it’s recommended to provide a label for accessibility.

Bio

import { TextArea } from "stylus-ui/TextArea";

export default () => <TextArea label="Bio" />;

Help text

To display additional info beneath the input, pass in helpText.

Bio

Tell teammates what you do.

import { TextArea } from "stylus-ui/TextArea";

export default () => (
  <TextArea label="Bio" helpText="Tell teammates what you do." />
);

Sizing

When displaying an input in a space-constrained location, you can pass small, which decreases the padding and font size and sets a smaller minimum height.

Bio

Tell teammates what you do.

import { TextArea } from "stylus-ui/TextArea";

export default () => (
  <TextArea label="Bio" helpText="Tell teammates what you do." small />
);

Errors

When displaying an error message, pass error to highlight the input in red.

Bio

Tell teammates what you do.

import { TextArea } from "stylus-ui/TextArea";

export default () => (
  <TextArea label="Bio" helpText="Tell teammates what you do." error />
);

Placeholders

Placeholder text may be used to provide an example of input to the user.

Bio

import { TextArea } from "stylus-ui/TextArea";

export default () => <TextArea label="Bio" placeholder="What do you do?" />;

Accessibility

In general, avoid placeholder text. Placeholders can pose accessibility issues by making an empty form field look filled. Never use placeholder text to display instructions, since placeholder text disappears once the user types into the input.

For more information, see The Anatomy of Accessible Forms: The Problem with Placeholders.

Disabled

Bio

import { TextArea } from "stylus-ui/TextArea";

export default () => <TextArea label="Bio" disabled />;

Resizing

By default, <TextArea> can be dragged from the corner to vertically resize the input. To disable this, pass resize={false}. Notice the lack of a drag handle in the bottom right.

import { TextArea } from "stylus-ui/TextArea";

export default () => <TextArea resize={false} />;

API Reference

TextArea

Accepts multiline text input from users.

error

boolean = false

Show error state with error-coloured border, text, and placeholder.

---

helpText

string

Helper or error text shown below the textarea.

---

label

string

Label shown above the textarea.

---

resize

boolean = true

Allow vertical resize handle.

---

small

boolean = false

Use smaller height and text size.

---

theme

"light" | "dark" = "light"

Visual theme for background and outline.

---