Text Area
No props are required to display <TextArea>, but it’s recommended to provide a label for accessibility.
import { TextArea } from "stylus-ui/TextArea";
export default () => <TextArea label="Bio" />;Help text
Section titled “Help text”To display additional info beneath the input, pass in helpText.
Tell teammates what you do.
import { TextArea } from "stylus-ui/TextArea";
export default () => ( <TextArea label="Bio" helpText="Tell teammates what you do." />);Sizing
Section titled “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.
Tell teammates what you do.
import { TextArea } from "stylus-ui/TextArea";
export default () => ( <TextArea label="Bio" helpText="Tell teammates what you do." small />);Errors
Section titled “Errors”When displaying an error message, pass error to highlight the input in red.
Tell teammates what you do.
import { TextArea } from "stylus-ui/TextArea";
export default () => ( <TextArea label="Bio" helpText="Tell teammates what you do." error />);Placeholders
Section titled “Placeholders”Placeholder text may be used to provide an example of input to the user.
import { TextArea } from "stylus-ui/TextArea";
export default () => <TextArea label="Bio" placeholder="What do you do?" />;Disabled
Section titled “Disabled”import { TextArea } from "stylus-ui/TextArea";
export default () => <TextArea label="Bio" disabled />;Resizing
Section titled “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
Section titled “API Reference”TextArea
Section titled “TextArea”Inherits properties from HTMLTextAreaElement.