Textarea

Used to enter multiple lines of text.

Usage

import { Textarea } from "chakra-ui-solid";

<Textarea placeholder="..." />

Examples

Variants

Use the variant prop to change the appearance of the textarea.

Sizes

Use the size prop to change the size of the textarea.

Helper Text

Pair the textarea with the Field component to add helper text.

Comment Max 500 characters.

Error Text

Pair the textarea with the Field component to add error text.

Comment Field is required

Field

Compose the textarea with the Field component to add a label, helper text, and error text.

Comment

Resize

Use the resize prop to control the resize behavior of the textarea.

To limit the maximum height (or rows) of the textarea, we recommend using the maxHeight prop and setting the value to a lh unit.

<Textarea autoresize maxH="5lh" />

Autoresize

Use the autoresize prop to make the textarea autoresize vertically as you type.

Ref

Here’s how to access the underlying element reference. Solid has no forwardRef, so there is nothing to wrap: a ref is a prop like any other and reaches the element on the spread.

const Demo = () => {
  let ref: HTMLTextAreaElement | undefined;
  return <Textarea ref={ref} />;
};

Props

TextareaProps
Prop	Default	Type
`autoresize`	`false`	`boolean` Whether the box grows to fit its value as you type, instead of scrolling. It also takes the drag handle away — a box that sizes itself and a box the reader sizes are two different controls. Cap the growth with a `maxHeight` in line units: `<Textarea autoresize maxH="5lh" />`.
`size`	`'md'`	`ConditionalValue<'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| PresetVariant<'textarea', 'size'>>` The minimum height, padding and text style together.
`variant`	`'outline'`	`ConditionalValue<'outline' \| 'subtle' \| 'flushed' \| PresetVariant<'textarea', 'variant'>>` How the field is drawn — `outline` is a full border, `subtle` fills it instead, and `flushed` keeps only the bottom edge with no radius or horizontal padding.

Plus HTMLChakraProps<"textarea"> — the whole style-prop surface and the DOM attributes of the element it renders, several hundred names listed as their sources rather than expanded — and the three every component takes: as, render and unstyled.