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 />
);

Dark mode

To display the textarea on a dark background, pass darkMode.

Bio

Tell teammates what you do.

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

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

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

Inherits properties from HTMLTextAreaElement.

Prop	Type	Default
darkMode	boolean	false
disabled	boolean	false
error	boolean	false
helpText	string
label	string
resize	boolean	true
small	boolean	false