Textarea

The Textarea component provides a flexible and customizable input field that can handle multi-line text entries. It can be styled to fit different layouts and is perfect for situations where users need to enter longer text, such as feedback forms, comments, or code editors.

Usage

The Textarea component is designed for handling multi-line text input. It can be used in forms, feedback sections, or anywhere where users need to provide more extensive information. Below is a basic example demonstrating how to use the Textarea component effectively in your project.

"use client";
import { useState } from "react";
import { Stack } from "@/ui/stack";
import { Textarea } from "@/ui/textarea";
import { Typography } from "@/ui/typography";

export function TextareaDemo() {
  const [value, setValue] = useState<string>("");

  return (
    <Stack className="mx-auto w-full max-w-xl">
      <Typography prose="label" htmlFor="textarea-demo">Textarea will autosize to fit the content</Typography>
      <Textarea id="textarea-demo" placeholder="Enter Text here" value={value} onChange={e => setValue(e.currentTarget.value)} />
    </Stack>
  );
}

Textarea Validate Json

If your Textarea is intended for handling JSON input or any structured data, validation is crucial. This section demonstrates how to use the Textarea component along with validation, ensuring that the data entered by the user is in a valid JSON format.

"use client";
import { useState } from "react";
import { Stack } from "@/ui/stack";
import { Textarea } from "@/ui/textarea";
import { Typography } from "@/ui/typography";

export function TextareaValidateJsonDemo() {
  const [error, setError] = useState<Error | null>(null);

  return (
    <Stack className="mx-auto w-full max-w-xl">
      <Typography prose="label" htmlFor="textarea-validatejson-demo">Textarea with validate JSON</Typography>
      <Textarea
        validateJson
        formatOnBlur
        id="textarea-validatejson-demo"
        validationError="Invalid JSON"
        onValidationError={error => setError(error)}
        className="max-w-xl"
        placeholder="Enter JSON here, e.g. [{}]"
      />
      <Typography el="label" htmlFor="textarea-validatejson-demo" hidden={!error} className="-my-2 text-sm text-destructive">{error?.message}</Typography>
      <Typography prose="muted">Enter inline text in JSON format and blur from Textarea component to format the text.</Typography>
    </Stack>
  );
}

Tip:

Use the resize property to control whether the user can resize the textarea. It's great for keeping the layout consistent, especially on fixed-width containers.

Note:

Ensure that proper validation is in place when using Textarea for sensitive input types, like JSON or code, to provide immediate feedback for users.

API References

• mdn

JsonInput is based on Textarea component, it includes json validation logic and option to format input value on blur.

Textarea will adjust its height when you give it a value that exceeds its initial height, this approach will help you more to review what you have typed previously.

Styles API

Props API

Source Codes

Full working code example, including necessary markup and styles. You can copy and paste this code directly to start using the component immediately.