Textarea

The Textarea component is a wrapper around the Chakra UI Textarea component. This component can be utilized to capture user inputs of multiple lines.

Component usage

You can use it as a standalone component with its various options.

<Textarea id="example-textarea" name="example-textarea" placeholder="Enter your text here..." />

You can add resize prop to change the Textarea resize behavior.

import { Radio, RadioGroup, Stack, Textarea } from "@caspeco/casper-ui-library";
import { useState } from "react";

type ResizeValue = "horizontal" | "vertical" | "none";

export default function Demo() {
  const [resize, setResize] = useState<ResizeValue>("horizontal");

  return (
    <Stack>
      <RadioGroup defaultValue={resize} onValueChange={({ value }) => setResize(value as ResizeValue)}>
        <Stack direction="row">
          <Radio value="horizontal">Horizontal</Radio>
          <Radio value="vertical">Vertical</Radio>
          <Radio value="none">None</Radio>
        </Stack>
      </RadioGroup>

      <Textarea placeholder="Try out the resize behavior!" resize={resize} />
    </Stack>
  );
}

⛶

If you want the textarea to look like an ordinary text when not focused you can use the “ghost” variant prop!

import { Textarea } from "@caspeco/casper-ui-library";

export default function Demo() {
  return <Textarea variant="ghost" placeholder="Ghost textarea, write here..." resize="none" />;
}

⛶