Textarea

Enter multiple lines of text.

Examples

Use rows for initial height and resize for manual resizing. Standard maxLength, name, required and form attributes are supported. Controlled values update through onChange. className and style apply to the container.

basic.tsx

import { Form, FormField, Textarea } from '@ifhover/leaf-ui';

export function TextareaBasic() {
  return (
    <Form layout="vertical">
      <FormField label="Project description">
        <Textarea
          aria-label="Project description"
          placeholder="Describe your new idea…"
          rows={3}
          maxLength={200}
        />
      </FormField>
      <FormField label="Read-only introduction">
        <Textarea
          aria-label="Read-only introduction"
          defaultValue="Plant your ideas in the interface."
          readOnly
          rows={2}
        />
      </FormField>
      <FormField label="Disabled introduction">
        <Textarea
          aria-label="Disabled introduction"
          placeholder="Cannot edit right now"
          disabled
          rows={2}
        />
      </FormField>
    </Form>
  );
}

controlled.tsx

import { Form, FormField, Textarea } from '@ifhover/leaf-ui';

import { useState } from 'react';

export function TextareaControlled() {
  const [value, setValue] = useState('');
  return (
    <Form layout="vertical">
      <FormField label="Message" help={`${value.length} / 120`}>
        <Textarea
          value={value}
          maxLength={120}
          resize="none"
          placeholder="Up to 120 characters"
          onChange={(event) => setValue(event.target.value)}
        />
      </FormField>
      <FormField label="Message error" error="Add a description.">
        <Textarea placeholder="Add a description" />
      </FormField>
    </Form>
  );
}

Extended features

Auto heightCharacter count

21 / 120

extensions.tsx

import { Space, Textarea } from '@ifhover/leaf-ui';

export function ExtensionDemo() {
  return (
    <Space direction="vertical" align="stretch">
      <label htmlFor="textarea-extension-1">
        Auto height
        <Textarea
          id="textarea-extension-1"
          autoSize={{ minRows: 2, maxRows: 6 }}
          placeholder="Type more content"
        />
      </label>
      <label htmlFor="textarea-extension-2">
        Character count
        <Textarea
          id="textarea-extension-2"
          showCount
          maxLength={120}
          defaultValue="Start your plan here."
        />
      </label>
    </Space>
  );
}

Textarea API

Property	Type	Default	Description
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Control size
`status`	`'error' \| 'warning'`	—	Validation appearance
`rows`	`number`	`3`	Initial visible rows
`resize`	`'none' \| 'vertical' \| 'both'`	`'vertical'`	Allowed manual resizing direction
`value` / `defaultValue`	`string \| number \| readonly string[]`	—	Controlled value / initial uncontrolled value
`onChange`	`ChangeEventHandler<HTMLTextAreaElement>`	—	Read event.target.value
`disabled` / `readOnly`	`boolean`	`false`	Disabled / read-only
`ref`	`Ref<HTMLTextAreaElement>`	—	DOM reference
`autoSize`	`boolean \| TextareaAutoSize`	`false`	Resize to content with optional row limits
`showCount`	`boolean \| ((value: string, maxLength?: number) => ReactNode)`	`false`	Display count or a custom renderer

Types

Import TextareaProps to describe component props. Option types in the API table link to their detailed fields above.

import type { TextareaProps } from '@ifhover/leaf-ui';

Forms and localization

Use name to include values in FormData. Uncontrolled fields follow form reset; reset controlled values in application state. Place controls in FormField for labels, help and errors. ConfigProvider supplies regional themes and translated built-in UI. Application labels and options are your responsibility.

Extension types

import type { TextareaAutoSize } from '@ifhover/leaf-ui';

TextareaAutoSize API

Property	Type	Default	Description
`minRows`	`number`	—	Minimum rows
`maxRows`	`number`	—	Maximum rows

#Textarea

#Examples

#Extended features

#Textarea API

#Types

#Forms and localization

#Extension types

#TextareaAutoSize API