Skip Navigation
React Magma

Textarea

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 } from 'react-magma-dom';


export function Example() {
  return (
    <Card 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.

containerStyle

Description

Style properties for the component container element

Type

CSSProperties

Default

-

isInverse

Description

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

Type

boolean

Default

false

maxCount

Description

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

Type

number

Default

-

textareaStyle

Description

Style properties for the textarea element

Type

CSSProperties

Default

-

value

Description

Value for the textarea

Type

string | ReadonlyArray | number

Default

-

On this page

Deploys by Netlify