Text Area

The TextArea component is used to create a basic text input area. It supports different color modes and can be customized with various props.

Basic

The TextArea component is used to create a basic text input area. It supports different color modes and can be customized with various props.

const BasicExampleComponent = () => {
  return (
    <TextArea placeholder="Tell us about yourself..."></TextArea>
  );
};

With Icon

You can use the IconLeftComponent and IconRightComponent props to add an icon to the left or right of the text area.

const WithIconComponent = () => {
  return (
    <>
      {/* Icon left */}
      <TextArea placeholder="Write your bio...">
        <TextArea.LeftIcon>
          <User />
        </TextArea.LeftIcon>
      </TextArea>

      {/* Icon right */}
      <TextArea placeholder="Type your message...">
        <TextArea.RightIcon>
          <MessageSquare />
        </TextArea.RightIcon>
      </TextArea>
    </>
  );
};

With Custom Icon Element

You can also pass your custom react elements as icons for further customization.

const WithCustomIconElementComponent = () => {
  return (
    <>
      {/* Icon left */}
      <TextArea placeholder="Write your bio...">
        <TextArea.LeftIcon>
          <User size={20} color="$red.500" />
        </TextArea.LeftIcon>
      </TextArea>

      {/* Icon right */}
      <TextArea placeholder="Type your message...">
        <TextArea.RightIcon>
          <MessageSquare size={20} color="$red.500" />
        </TextArea.RightIcon>
      </TextArea>
    </>
  );
};

With Label

Use the LabelComponent prop to add a label to the text area. You can also use the required prop to add a required indicator to the label.

Shipping Address

Issue Description

*

const WithLabelComponent = () => {
  return (
    <>
      {/* With label */}
      <TextArea placeholder="123 Main Street, Apt 4B, New York, NY 10001">
        <TextArea.LeftIcon>
          <MapPin />
        </TextArea.LeftIcon>
        <TextArea.Label>Shipping Address</TextArea.Label>
      </TextArea>

      {/* With label + required */}
      <TextArea required placeholder="Please describe your issue in detail...">
        <TextArea.LeftIcon>
          <FileText />
        </TextArea.LeftIcon>
        <TextArea.Label>Issue Description</TextArea.Label>
      </TextArea>
    </>
  );
};

Disabled

Use the isDisabled prop to disable the text area.

const DisabledComponent = () => {
  return (
    <TextArea
      isDisabled={true}
      placeholder="Comments are disabled for this post..."
    >
      <TextArea.LeftIcon>
        <MessageSquare />
      </TextArea.LeftIcon>
    </TextArea>
  );
};

Custom Border Color

Use the borderColor prop to customize the border color of the text area. You can also use the _focus prop to customize the border color when the text area is focused.

const CustomBorderColorComponent = () => {
  return (
    <TextArea
      borderColor="$red.500"
      _focus={{ borderColor: "blue.400" }}
      placeholder="Add special instructions for your order..."
    >
      <TextArea.LeftIcon>
        <FileText />
      </TextArea.LeftIcon>
    </TextArea>
  );
};

With Accessibility Label

Use the accessibilityLabel prop to add an accessibility label to the text area.

const WithAccessibilityLabelComponent = () => {
  return (
    <TextArea
      placeholder="Compose your email message..."
      accessibilityLabel="Email message content. Write your email message here."
    >
      <TextArea.LeftIcon>
        <Mail />
      </TextArea.LeftIcon>
    </TextArea>
  );
};

With Validation Error Message

Use the error prop to add a validation error indicator to the text area. You can complement the validation indicator with a Message component.

Description must be at least 50 characters

const WithValidationErrorMessageComponent = () => {
  const errorColor = useColorModeValue("$red.500", "$red.300");
  return (
    <>
      <TextArea placeholder="Describe your project requirements..." error>
        <TextArea.LeftIcon>
          <FileText />
        </TextArea.LeftIcon>
      </TextArea>
      <Footnote color={errorColor}>
        Description must be at least 50 characters
      </Footnote>
    </>
  );
};

Success

Use the success prop to add a validation success indicator to the text area. You can complement the validation indicator with a Message component.

Thank you! Your review has been saved

const SuccessComponent = () => {
  return (
    <>
      <TextArea placeholder="Write your review..." success>
        <TextArea.LeftIcon>
          <Star />
        </TextArea.LeftIcon>
      </TextArea>
      <Message type="success">Thank you! Your review has been saved</Message>
    </>
  );
};

Override Color Mode

Use the colorMode prop to override the color mode of the text area.

const OverrideColorModeComponent = () => {
  return (
    <TextArea
      placeholder="Share your feedback about the new feature..."
    >
      <TextArea.LeftIcon>
        <MessageSquare />
      </TextArea.LeftIcon>
    </TextArea>
  );
};

Override Accent Color

Use the accentColor prop to override the accent color of the text area.

const OverrideAccentColorComponent = () => {
  return (
    <TextArea placeholder="Add a note to your booking..." accentColor="amber">
      <TextArea.LeftIcon>
        <Pencil />
      </TextArea.LeftIcon>
    </TextArea>
  );
};

Override Color Mode and Accent Color

You can use the colorMode and accentColor props together to override the color mode and accent color of the text area.

const OverrideColorModeAndAccentColorComponent = () => {
  return (
    <TextArea
      placeholder="Report a bug or issue..."
      accentColor="red"
    >
      <TextArea.LeftIcon>
        <FileText />
      </TextArea.LeftIcon>
    </TextArea>
  );
};

No border radius

A TextArea component without border radius.

const NoBorderRadiusComponent = () => {
  return (
    <TextArea
      placeholder="Describe your experience..."
      borderRadius={"$0"}
    ></TextArea>
  );
};

No border

A TextArea component without border.

const NoBorderComponent = () => {
  return (
    <TextArea
      placeholder="Share your thoughts..."
      borderWidth={"$0"}
    ></TextArea>
  );
};