Textarea

A versatile multi-line text input component for longer content. Perfect for comments, descriptions, feedback, and any scenario requiring extended text input.

Import

import { Textarea } from "@sparrowengg/twigs-react";

Usage

const TextareaExample = () => {
  const [value, setValue] = useState("");
  
  return (
    <Box css={{ display: "flex", flexDirection: "column", gap: "$4" }}>
      <Textarea
        label="Description"
        placeholder="Enter your message here..."
        value={value}
        onChange={(e) => setValue(e.target.value)}
        rows={4}
        showCount
        maxLength={500}
      />
    </Box>
  );
};

Examples

Variants and Sizes

Explore different visual styles and sizes for various use cases.

Props

Prop	Type	Default
`label?`	`string`	-
`placeholder?`	`string`	-
`value?`	`string`	-
`defaultValue?`	`string`	-
`onChange?`	`(event: ChangeEvent<HTMLTextAreaElement>) => void`	-
`variant?`	`'default' \| 'filled'`	`'default'`
`size?`	`'sm' \| 'md' \| 'lg' \| 'xl'`	-
`resize?`	`'both' \| 'vertical' \| 'horizontal' \| 'none'`	`'both'`
`rows?`	`number`	-
`cols?`	`number`	-
`disabled?`	`boolean`	`false`
`maxLength?`	`number`	-
`showCount?`	`boolean`	`false`
`renderCounter?`	`({ length: number; maxLength?: number }) => ReactNode`	-
`error?`	`string`	-
`errorBorder?`	`boolean`	`false`
`helperText?`	`string`	-
`requiredIndicator?`	`boolean \| ReactElement`	-
`info?`	`string \| ReactNode`	-
`css?`	`object`	-
`className?`	`string`	-
`id?`	`string`	-

Textarea

Import

Usage

Examples

Variants and Sizes

Props

Textarea

On this page