Skip to Content
ComponentsTextarea

Textarea

Multi-line text field for capturing user input.

Documentation

Usage

"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.

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.

"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
Last updated on