Textarea

The Textarea component allows you to create a multi-line text input.

Import

copy
import { Textarea } from '@trendmicro/react-styled-ui';
import { Textarea } from '@trendmicro/react-styled-ui';

Usage

EDITABLE EXAMPLE
copy
<>
  <TextLabel mb="1x">Label:</TextLabel>
  <Textarea placeholder="Basic example" />
  <Text size="xs" mt="1x">Help text for the text input</Text>
</>
<>
  <TextLabel mb="1x">Label:</TextLabel>
  <Textarea placeholder="Basic example" />
  <Text size="xs" mt="1x">Help text for the text input</Text>
</>

Sizing

• The rows and cols properties allow you to specify an exact size for the <Textarea> to take. Setting these is a good idea for consistency, as browser defaults can differ.
• The maxLength property specifies a maximum number of characters that the Textarea is allowed to contain.
• The minLength property specifies a minimum length that is considered valid. Textarea will not submit (and is invalid) if it is empty, using the required attribute.
• The resize property to set whether the Textarea is resizable, and if so, in which directions. You can set the value to none, both, horizontal, or vertical.

EDITABLE EXAMPLE
copy
function Example() {
  const [resize, setResize] = React.useState('both');

  return (
    <>
      <Flex align="center" mb="5x">
        <TextLabel>resize =</TextLabel>
        <Space width="2x" />
        <Stack direction="row" spacing="2x">
          {['none', 'both', 'horizontal', 'vertical'].map(value => (
            <Button
              key={value}
              variant={resize === value ? 'primary' : 'secondary'}
              onClick={() => setResize(value)}
            >
              {value}
            </Button>
          ))}
        </Stack>
      </Flex>
      <Textarea
        defaultValue="Placeholder text"
        width="auto"
        resize={resize}
        rows="3"
        cols="12"
        minLength={4}
        maxLength={16}
        transition="none"
      />
    </>
  );
}
function Example() {
  const [resize, setResize] = React.useState('both');

  return (
    <>
      <Flex align="center" mb="5x">
        <TextLabel>resize =</TextLabel>
        <Space width="2x" />
        <Stack direction="row" spacing="2x">
          {['none', 'both', 'horizontal', 'vertical'].map(value => (
            <Button
              key={value}
              variant={resize === value ? 'primary' : 'secondary'}
              onClick={() => setResize(value)}
            >
              {value}
            </Button>
          ))}
        </Stack>
      </Flex>
      <Textarea
        defaultValue="Placeholder text"
        width="auto"
        resize={resize}
        rows="3"
        cols="12"
        minLength={4}
        maxLength={16}
        transition="none"
      />
    </>
  );
}

Variants

The Textarea component comes in 3 variants: outline, filled, and unstyled. Pass the variant prop and set it to either of these values.

outline

EDITABLE EXAMPLE
copy
<Textarea variant="outline" placeholder="John Doe" />
<Textarea variant="outline" placeholder="John Doe" />

filled

EDITABLE EXAMPLE
copy
<Textarea variant="filled" placeholder="John Doe" />
<Textarea variant="filled" placeholder="John Doe" />

unstyled

EDITABLE EXAMPLE
copy
<Textarea variant="unstyled" placeholder="John Doe" />
<Textarea variant="unstyled" placeholder="John Doe" />

Attributes

General form input attributes are supported, such as disabled, readOnly, required, etc.

disabled

EDITABLE EXAMPLE
copy
<Stack directin="column" spacing="4x">
  <Textarea disabled placeholder="Placeholder text" />
  <Textarea disabled placeholder="Placeholder text" defaultValue="Disabled" />
</Stack>
<Stack directin="column" spacing="4x">
  <Textarea disabled placeholder="Placeholder text" />
  <Textarea disabled placeholder="Placeholder text" defaultValue="Disabled" />
</Stack>

readOnly

EDITABLE EXAMPLE
copy
<Stack directin="column" spacing="4x">
  <Textarea readOnly placeholder="Placeholder text" />
  <Textarea readOnly placeholder="Placeholder text" defaultValue="Read-only" />
</Stack>
<Stack directin="column" spacing="4x">
  <Textarea readOnly placeholder="Placeholder text" />
  <Textarea readOnly placeholder="Placeholder text" defaultValue="Read-only" />
</Stack>

required

EDITABLE EXAMPLE
copy
<Textarea required placeholder="Placeholder text" />
<Textarea required placeholder="Placeholder text" />

Validation

Use the isInvalid attribute to indicate that the value entered into an input field does not conform to the format expected by the application. isInvalid can also be used to indicate that a required field has not been filled in.

Set isInvalid to true on the fields that have failed validation, otherwise set it to false if no errors detected.

EDITABLE EXAMPLE
copy
const InlineError = (props) => (
  <Text fontSize="sm" lineHeight="sm" color="red:50" {...props} />
);

const MultilineInputField = ({
  value,
  onChange,
  ...props
}) => {
  const isInvalid = (value === '');
  let invalidTextareaStyle = {};
  if (isInvalid) {
    invalidTextareaStyle = {
      isInvalid: true,
      pr: '10x',
    };
  }

  return (
    <>
      <Flex position="relative" alignItems="center" mb="1x">
        <Textarea
          resize="none"
          rows="3"
          placeholder="Placeholder text"
          value={value}
          onChange={onChange}
          {...invalidTextareaStyle}
        />
        {isInvalid && (
          <Box position="absolute" right={0} top=".375rem">
            <Icon icon="warning-circle" mx="3x" color="red:50" />
          </Box>
        )}
      </Flex>
      <Box>
        {isInvalid && (
          <InlineError>This is a required field.</InlineError>
        )}
      </Box>
    </>
  );
};

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

  return (
    <MultilineInputField value={value} onChange={onChange} />
  );
}

render(<Example />);
const InlineError = (props) => (
  <Text fontSize="sm" lineHeight="sm" color="red:50" {...props} />
);

const MultilineInputField = ({
  value,
  onChange,
  ...props
}) => {
  const isInvalid = (value === '');
  let invalidTextareaStyle = {};
  if (isInvalid) {
    invalidTextareaStyle = {
      isInvalid: true,
      pr: '10x',
    };
  }

  return (
    <>
      <Flex position="relative" alignItems="center" mb="1x">
        <Textarea
          resize="none"
          rows="3"
          placeholder="Placeholder text"
          value={value}
          onChange={onChange}
          {...invalidTextareaStyle}
        />
        {isInvalid && (
          <Box position="absolute" right={0} top=".375rem">
            <Icon icon="warning-circle" mx="3x" color="red:50" />
          </Box>
        )}
      </Flex>
      <Box>
        {isInvalid && (
          <InlineError>This is a required field.</InlineError>
        )}
      </Box>
    </>
  );
};

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

  return (
    <MultilineInputField value={value} onChange={onChange} />
  );
}

render(<Example />);

Props