Textarea

Multi-line text field for capturing user input.

Source

Want to skip the docs? Try our MCP Server

#
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 { Group, Text, Textarea } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState("");
 
  return (
    <Group flexDirection="column" gap="16" maxW="xs" w="full">
      <Textarea onValueChange={setValue} value={value} />
      <Text fontSize="md">Input value: {value}</Text>
    </Group>
  );
}

Using onChange:

Input value:


"use client";
 
import { Group, Text, Textarea } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [value, setValue] = useState("");
 
  return (
    <Group flexDirection="column" gap="16" maxW="xs" w="full">
      <Textarea
        onChange={(event) => setValue(event.target.value)}
        value={value}
      />
      <Text fontSize="md">Input value: {value}</Text>
    </Group>
  );
}

#
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 { Group, Textarea } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group flexDirection="column" gap="16" maxW="xs" w="full">
      <Textarea placeholder="Enter text..." resize="auto" />
    </Group>
  );
}

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


import { Group, Textarea } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group flexDirection="column" gap="16" maxW="xs" w="full">
      <Textarea
        maxRows={3}
        placeholder="Enter text..."
        resize="auto"
        rows={1}
      />
    </Group>
  );
}

#
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 {
  IconArrowUp,
  IconAt,
  IconCommentPlus,
  IconFileImage,
} from "@optiaxiom/icons";
import { Button, Group, Textarea, Tooltip } from "@optiaxiom/react";
 
export function App() {
  return (
    <Textarea
      addonAfter={
        <Group borderT="1" gap="4" p="4">
          <Tooltip content="Add emoji">
            <Button appearance="subtle" icon={<IconCommentPlus />} size="sm" />
          </Tooltip>
          <Tooltip content="Add mention">
            <Button appearance="subtle" icon={<IconAt />} size="sm" />
          </Tooltip>
          <Tooltip content="Upload images">
            <Button appearance="subtle" icon={<IconFileImage />} size="sm" />
          </Tooltip>
 
          <Tooltip content="Submit">
            <Button
              appearance="primary"
              icon={<IconArrowUp />}
              ml="auto"
              size="sm"
            />
          </Tooltip>
        </Group>
      }
      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 {
  IconArrowUp,
  IconAt,
  IconCommentPlus,
  IconFileImage,
} from "@optiaxiom/icons";
import { Button, Group, Textarea, Tooltip } from "@optiaxiom/react";
 
export function App({
  addonPointerEvents = "none",
}: Pick<ComponentPropsWithoutRef<typeof Textarea>, "addonPointerEvents">) {
  return (
    <Textarea
      addonAfter={
        <Group gap="4" p="4">
          <Tooltip content="Add emoji">
            <Button appearance="subtle" icon={<IconCommentPlus />} size="sm" />
          </Tooltip>
          <Tooltip content="Add mention">
            <Button appearance="subtle" icon={<IconAt />} size="sm" />
          </Tooltip>
          <Tooltip content="Upload images">
            <Button appearance="subtle" icon={<IconFileImage />} size="sm" />
          </Tooltip>
 
          <Tooltip content="Submit">
            <Button
              appearance="primary"
              icon={<IconArrowUp />}
              ml="auto"
              size="sm"
            />
          </Tooltip>
        </Group>
      }
      addonPointerEvents={addonPointerEvents}
      placeholder="Add a comment"
      w="224"
    />
  );
}

#
Related

Input

Basic text field for capturing user input.

Field

Wrapper for inputs to provide context such as label, help text and required state.

SearchInput

Basic search input field with clear button.

#
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`
`children` `ReactNode`
`className` `string`
`disabled` Whether the input is disabled. `false \| true`
`error` Whether to show the input error state. Automatically set when used inside a Field component with an error prop. `false \| true`
`maxRows` Limits the height of the textarea when `resize=auto` is used. `1 \| 2 \| 3 \| 4 \| 5`
`name` The name of the form control element. `string`
`onValueChange` Handler that is called when the value changes. `(value: string) => void`
`placeholder` The placeholder text to use when control has no value. `string`
`required` Whether selecting this input is required. `false \| true`
`resize` Control whether resizing mode is manual, automatic, or disabled. `"none" \| "auto" \| "vertical"`
`rows` The number of rows to display. `number`

#
Changelog

#
0.1.0

Added component