A Textarea is an input field for long content.

Basic Usage

import React from 'react';

import { Textarea } from 'react-magma-dom';

export function Example() {
  return <Textarea labelText="Textarea" value="Some text" />;
}

Default Value

import React from 'react';

import { Textarea } from 'react-magma-dom';

export function Example() {
  return <Textarea labelText="Textarea" defaultValue="Some text" />;
}

Error Message

import React from 'react';

import { Textarea } from 'react-magma-dom';

export function Example() {
  return (
    <Textarea
      errorMessage="Please fix this error"
      labelText="Textarea with error"
    />
  );
}

Helper Message

import React from 'react';

import { Textarea } from 'react-magma-dom';

export function Example() {
  return (
    <Textarea
      helperMessage="Helper text goes here"
      labelText="Textarea with helper"
    />
  );
}

Character Counter

import React from 'react';

import { Textarea } from 'react-magma-dom';

export function Example() {
  return <Textarea maxCount={4} labelText="Character Counter" />;
}

Disabled

import React from 'react';

import { Textarea } from 'react-magma-dom';

export function Example() {
  return <Textarea disabled labelText="Disabled textarea" />;
}

Inverse

import React from 'react';

import { Card, CardBody, Textarea, magma } from 'react-magma-dom';

export function Example() {
  return (
    <Card background={magma.colors.neutral1100} isInverse>
      <CardBody>
        <Textarea isInverse labelText="Inverse textarea" />
        <Textarea
          errorMessage="Please fix this error"
          isInverse
          labelText="Inverse textarea with error"
        />
      </CardBody>
    </Card>
  );
}

Textarea Props

This component uses forwardRef. The ref is applied to the textarea element.

All of the standard textarea attributes can be provided as props and will be applied to the textarea element that gets rendered.

actionable

Description

Is the wrapped input hidden with display:none? This would make the input look like an actionable item, so FormFieldContainer uses a span in lieu of a label.

Type

boolean

Default

containerStyle

Description

Style properties for the component container element

Type

CSSProperties

Default

errorMessage

Description

Content of the error message. If a value is provided, the field will be styled as an error state and the error message will display.

Type

ReactNode

Default

hasCharacterCounter

Description

Enables Character Counter by default. When set to false, the default HTML attribute of 'maxlength' will work. Note: This is a temporary prop and will be removed in future releases.

Type

boolean

Default

true

helperMessage

Description

Content of the helper message.

Type

ReactNode

Default

iconPosition

Description

Position within the component for the icon to appear

Type

enum, one of:
InputIconPosition.left
InputIconPosition.right
InputIconPosition.top

Default

InputIconPosition.right

inputLength

Description

Total number of characters in an input.

Type

number

Default

isInverse

Description

If true, the component will have inverse styling to better appear on a dark background

Type

boolean

Default

false

isLabelVisuallyHidden

Description

If true, label text will be hidden visually, but will still be read by assistive technology

Type

boolean

Default

false

labelPosition

Description

Position within the component for the label to appear

Type

enum, one of:
LabelPosition.left
LabelPosition.top

Default

LabelPosition.top

labelStyle

Description

Style properties for the label element

Type

CSSProperties

Default

labelText

Description

Content for label; can be a node or a string

Type

ReactNode

Default

labelWidth

Description

If the labelPosition value is 'left' then Input labels have a specified width in percentage, otherwise no width is set.

Type

number

Default

maxCount

Description

A number value which gives Character Counter the maximum length of allowable characters in an Textarea.

Type

number

Default

maxLength

Deprecated

Description

Enables the Character Counter and sets the maximum amount of characters allowed within the Input.

Type

number

Default

messageStyle

Description

Style properties for the helper or error message

Type

CSSProperties

Default

textareaStyle

Description

Style properties for the textarea element

Type

CSSProperties

Default

value

Description

Value for the textarea

Type

string | number | unknown

Default

On this page