TextArea

<TextArea label="Description" placeholder="Type your message here" />

Installation

npx dotui-cli@latest add text-area

Usage

Use a TextArea to allow users to input a long string of free-form text.

import { TextArea } from "@/components/core/text-area";
 
<TextArea label="Description" description="Enter your description." />;

import { Label, Description } from "@/components/core/field";
import { InputRoot, TextAreaInput } from "@/components/core/input";
import { TextAreaRoot } from "@/components/core/text-field";
 
<TextAreaRoot>
  <Label>Email</Label>
  <InputRoot multiline>
    <TextAreaInput />
  </InputRoot>
  <Description>Enter your email.</Description>
</TextAreaRoot>;

Options

Label

A visual label can be provided for the TextArea using the label prop or a hidden label using aria-label prop.

<TextArea label="Description" />
<TextArea aria-label="Description" />

Description

An errorMessage can be supplied to a TextField, which will be displayed when the isInvalid prop is set to true.

<TextArea label="Description" description="Type your description" />

Error message

An errorMessage can be supplied to a TextArea, which will be displayed when the isInvalid prop is set to true.

<TextArea 
  label="Comment"
  isInvalid
  errorMessage="You have exceeded the comment limit for one hour." 
/>

Prefix and suffix

To add additional context for the TextArea, use the prefix and suffix props.

<TextArea
  label="Comment"
  placeholder="type something here"
  prefix={<Emojis />}
  suffix={<Toolbar />}
/>

Disabled

Use the isDisabled prop to disable the TextArea.

<TextArea isDisabled />

ReadOnly

The isReadOnly boolean prop makes the TextArea's text content immutable. Unlike isDisabled, the text area remains focusable and the contents can still be copied.

<TextArea isReadOnly />

Required

Use the isRequired prop to mark the TextArea as required. Use the necessityIndicator prop to control the visual style of the required state.

<TextArea label="Description" isRequired necessityIndicator="icon" />

Uncontrolled

Use the defaultValue prop to set the default input value.

<TextArea label="Essay" defaultValue="Roses are red, violets are blue." />

Controlled

Use the value and onChange props to control the value of the input.

const [inputValue, setInputValue] = React.useState("Roses are red, violets are blue.");
return (
  <TextArea
    label="Essay"
    value={inputValue}
    onChange={(text) => {
      setInputValue(text);
    }}
  />
);

Composition

If you need to customize things further, you can drop down to the composition level.

<TextAreaRoot>
  <Label>Comment</Label>
  <InputRoot>
    <TextAreaInput />
  </InputRoot>
  <Description>Enter your comment.</Description>
</TextAreaRoot>

API Reference