Textarea

Import

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

Usage

Result

Loading...

Live EditorOpen in playground

<Textarea rows="8" placeholder="Enter your description" />

Textarea error

Result

Loading...

Live EditorOpen in playground

<Textarea
  label="Enter your details"
  error="Not a valid description"
/>

Character count

<Textarea
  showCount={true}
  maxLength={10}
/>

Using maxLength and showCount props, you can show the character count of the Textarea field.

Result

Loading...

Live EditorOpen in playground

function CharacterCount() {
  const [value, setValue] = React.useState("");
  return (
    <Textarea
      label="Description"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      showCount
      maxLength={10}
    />
  );
}

Variants

Result

Loading...

Live EditorOpen in playground

<Flex gap='12px' flexDirection='column'>
  <Textarea rows="4" placeholder='Default textarea variant' variant="default" />
  <Textarea rows="4" variant='filled' placeholder='Filled textarea variant' />
</Flex>

Props

Property	Description	Type	Default
variant	style of textarea	default filled	default
onChange		function
resize	control the textarea's resize ability	both vertical horizontal none	both
disabled		boolean	false
css	Custom styles for textarea	object
maxLength	Maximum allowed characters	number
rows	Maximum allowed rows	number
cols	Maximum allowed cols	number
errorBorder	Show error border when there is error	boolean	false
requiredIndicator	Show required indicator next to textarea	boolean, JSX Element
error	Message for textarea error	string
maxLength	Maximum allowed characters	number
showCount	Show remaining allowed character length	boolean
info	Adds an info icon with a tooltip beside the label. Label has to provided for this to work.	string | ReactNode
renderCounter	Replace default counter with a custom one	({ length, maxLength}: { length: number; maxLength?: number;}) => ReactNode;