TextArea

The TextArea component allows you to easily create multi-line text inputs.

Import

import { TextArea } from '@sajari-ui/core';

import { TextArea } from '@sajari-ui/core';

Usage

Editable Example

<TextArea placeholder="Here is a sample placeholder" />

<TextArea placeholder="Here is a sample placeholder" />

Controlled TextArea

Editable Example

Value:

function Example() {
  const [value, setValue] = React.useState('');
  const handleInputChange = (e) => setValue(e.target.value);

  return (
    <>
      <Text margin="mb-2">Value: {value}</Text>
      <TextArea value={value} onChange={handleInputChange} placeholder="Here is a sample placeholder" />
    </>
  );
}

function Example() {
  const [value, setValue] = React.useState('');
  const handleInputChange = (e) => setValue(e.target.value);
  return (
    <>
      <Text margin="mb-2">Value: {value}</Text>
      <TextArea value={value} onChange={handleInputChange} placeholder="Here is a sample placeholder" />
    </>
  );
}

Resize behavior

You can add resize prop to change the TextArea resize behavior.

Editable Example

Horizontal

Vertical

None

function ResizeExample() {
  const [resize, setResize] = React.useState('horizontal');
  const handleResizeChange = (event) => setResize(event.target.value);

  return (
    <>
      <Flex space="space-x-4" margin="mb-2" defaultValue={resize} onChange={handleResizeChange} mb={6}>
        <Radio value="horizontal">Horizontal</Radio>
        <Radio value="vertical">Vertical</Radio>
        <Radio value="none">None</Radio>
      </Flex>

      <TextArea placeholder="Here is a sample placeholder" size="sm" resize={resize} />
    </>
  );
}

function ResizeExample() {
  const [resize, setResize] = React.useState('horizontal');
  const handleResizeChange = (event) => setResize(event.target.value);
  return (
    <>
      <Flex space="space-x-4" margin="mb-2" defaultValue={resize} onChange={handleResizeChange} mb={6}>
        <Radio value="horizontal">Horizontal</Radio>
        <Radio value="vertical">Vertical</Radio>
        <Radio value="none">None</Radio>
      </Flex>
      <TextArea placeholder="Here is a sample placeholder" size="sm" resize={resize} />
    </>
  );
}

Disabled Textarea

Editable Example

<TextArea disabled placeholder="Here is a sample placeholder" />

<TextArea disabled placeholder="Here is a sample placeholder" />

Invalid Textarea

Editable Example

<TextArea invalid placeholder="Here is a sample placeholder" />

<TextArea invalid placeholder="Here is a sample placeholder" />

Props

The TextArea composes the Input component

Name	Type	Default	Description
resize	`string`	`vertical`	Textarea resize behavior, can be `vertical`, `horizontal` or `none`