Textarea

Multi-line text field for capturing user input.

Source

#
Documentation

#
Usage

Input label

Description

Error

Label

Required


"use client";
 
import type { ComponentPropsWithoutRef } from "react";
 
import { Field, Textarea } from "@optiaxiom/react";
 
export function App({
  description,
  error,
  label = "Input label",
  required = false,
}: Pick<
  ComponentPropsWithoutRef<typeof Field>,
  "description" | "error" | "label" | "required"
>) {
  return (
    <Field
      description={description}
      error={error}
      label={label}
      required={required}
    >
      <Textarea placeholder="Enter text..." />
    </Field>
  );
}

#
Controlled

Use the value and defaultValue props to toggle between controlled and uncontrolled usage. And combine it with onValueChange / onChange to listen for changes to the state.

Using onValueChange:

Input value:


"use client";
 
import { Flex, Text, Textarea } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState("");
 
  return (
    <Flex>
      <Textarea onValueChange={setValue} value={value} />
      <Text fontSize="md">Input value: {value}</Text>
    </Flex>
  );
}

Using onChange:

Input value:


"use client";
 
import { Flex, Text, Textarea } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState("");
 
  return (
    <Flex>
      <Textarea
        onChange={(event) => setValue(event.target.value)}
        value={value}
      />
      <Text fontSize="md">Input value: {value}</Text>
    </Flex>
  );
}

#
Error state

Enable the error prop to display the error state of the text field.


import { Textarea } from "@optiaxiom/react";
 
export function App() {
  return <Textarea defaultValue="Some invalid value" error />;
}

#
Disabled state

Enable the disabled prop to toggle the disabled state of the text field.


import { Textarea } from "@optiaxiom/react";
 
export function App() {
  return <Textarea defaultValue="Some disabled value" disabled />;
}

#
Read-only state

Enable the readOnly prop to display the read-only state of the text field.

Some read-only value


import { Textarea } from "@optiaxiom/react";
 
export function App() {
  return <Textarea defaultValue="Some read-only value" readOnly />;
}

#
Sizing

#
Fixed size

By default Textarea does not allow resizing and you can use the rows prop to set the size.


import { Textarea } from "@optiaxiom/react";
 
export function App() {
  return <Textarea placeholder="Enter text..." rows={2} />;
}

#
Auto sizing

Use resize=auto prop to automatically resize the textarea as the value changes.


import { Textarea } from "@optiaxiom/react";
 
export function App() {
  return <Textarea placeholder="Enter text..." resize="auto" />;
}

You can use the maxRows and rows props to limit the textarea size.


import { Textarea } from "@optiaxiom/react";
 
export function App() {
  return (
    <Textarea maxRows={3} placeholder="Enter text..." resize="auto" rows={1} />
  );
}

#
Manual sizing

Use the resize=vertical prop to allow users to manually resize the textarea.

You can use rows prop to set the initial size of the textarea.


import { Textarea } from "@optiaxiom/react";
 
export function App() {
  return <Textarea placeholder="Enter text..." resize="vertical" />;
}

#
Reset sizing

Use the resize=none prop to disallow resizing the textarea.

You can use rows prop to set the size of the textarea.


import { Textarea } from "@optiaxiom/react";
 
export function App() {
  return <Textarea placeholder="Enter text..." resize="none" rows={2} />;
}

#
Addons

#
Top and bottom addons

Use the addonBefore and addonAfter prop to add icons, text, or any other element to the start or end of the text field.


import { Button, Flex, Textarea, Tooltip } from "@optiaxiom/react";
import {
  IconArrowUp,
  IconAt,
  IconMoodSmile,
  IconPhoto,
} from "@tabler/icons-react";
 
export function App() {
  return (
    <Textarea
      addonAfter={
        <Flex borderT="1" flexDirection="row" gap="4" p="4">
          <Tooltip content="Add emoji">
            <Button appearance="subtle" icon={<IconMoodSmile />} size="sm" />
          </Tooltip>
          <Tooltip content="Add mention">
            <Button appearance="subtle" icon={<IconAt />} size="sm" />
          </Tooltip>
          <Tooltip content="Upload images">
            <Button appearance="subtle" icon={<IconPhoto />} size="sm" />
          </Tooltip>
 
          <Tooltip content="Submit">
            <Button
              appearance="primary"
              icon={<IconArrowUp />}
              ml="auto"
              size="sm"
            />
          </Tooltip>
        </Flex>
      }
      placeholder="Add a comment"
      w="224"
    />
  );
}

#
Handling addon clicks

Use the addonPointerEvents prop to control whether clicking blank spaces in the addons focuses the input or not.

Addon pointer events


"use client";
 
import type { ComponentPropsWithoutRef } from "react";
 
import { Button, Flex, Textarea, Tooltip } from "@optiaxiom/react";
import {
  IconArrowUp,
  IconAt,
  IconMoodSmile,
  IconPhoto,
} from "@tabler/icons-react";
 
export function App({
  addonPointerEvents = "none",
}: Pick<ComponentPropsWithoutRef<typeof Textarea>, "addonPointerEvents">) {
  return (
    <Textarea
      addonAfter={
        <Flex flexDirection="row" gap="4" p="4">
          <Tooltip content="Add emoji">
            <Button appearance="subtle" icon={<IconMoodSmile />} size="sm" />
          </Tooltip>
          <Tooltip content="Add mention">
            <Button appearance="subtle" icon={<IconAt />} size="sm" />
          </Tooltip>
          <Tooltip content="Upload images">
            <Button appearance="subtle" icon={<IconPhoto />} size="sm" />
          </Tooltip>
 
          <Tooltip content="Submit">
            <Button
              appearance="primary"
              icon={<IconArrowUp />}
              ml="auto"
              size="sm"
            />
          </Tooltip>
        </Flex>
      }
      addonPointerEvents={addonPointerEvents}
      placeholder="Add a comment"
      w="224"
    />
  );
}

#
Related

Input

Basic text field for capturing user input.

#
Props

#
Textarea

Supports all Box props in addition to its own. Renders a <div> element but forwards all props to an inner <textarea> element.

Prop
`addonAfter` Display content below the textarea. `ReactNode`
`addonBefore` Display content above the textarea. `ReactNode`
`addonPointerEvents` When this prop is set to `none` clicking empty space inside the addon will focus the input box. `"none" \| "auto"`
`asChild` Change the default rendered element for the one passed as a child, merging their props and behavior. Read the Composition guide for more details. `false \| true`
`className` `string`
`disabled` Whether the input is disabled. `false \| true`
`error` Whether to show the input error state. `false \| true`
`maxRows` Limits the height of the textarea when `resize=auto` is used. `1 \| 2 \| 3 \| 4 \| 5`
`onValueChange` Handler that is called when the value changes. `(value: string) => void`
`resize` Control whether resizing mode is manual, automatic, or disabled. `"none" \| "auto" \| "vertical"`

#
Changelog

#
0.1.0

Added component