TextArea

a control to input multiple lines of text

Storybook

CodeSandbox

Github

Using Grommet for HPE?See TextArea examples and guidance.

Props

a11yTitle

Custom label to be used by screen readers. When provided, an aria-label will be added to the element.

string

"a user friendly label for screen readers"

fill

Whether the width and height should fill the container.

boolean

true

false

focusIndicator

Whether the plain TextArea should receive a focus outline.

boolean

true

false

id

The id attribute of the textarea.

string

"id"

name

The name attribute of the textarea.

string

"name"

onChange

Function that will be called when the user types in the textarea.

function

() => {}

placeholder

Placeholder text to use when no value is provided.

string

"Enter text here..."

plain

Whether this is a plain textarea with no border or padding. Only use this when the containing context provides sufficient affordance.

boolean

true

false

resize

Whether user is allowed to resize the textarea.

boolean

true

false

string

"vertical"

"horizontal"

size

The size of the text.

string

"xsmall"

"small"

"medium"

"large"

"xlarge"

"xxlarge"

"2xl"

"3xl"

"4xl"

"5xl"

"6xl"

"string"

value

What text to put in the textarea.

string

"sample text"

React/DOM Properties

At its core, the TextArea component is a regular <textarea> element. Thus, both DOM and React properties, methods, and events are accessible. To read up on all of the possible DOM attributes and types available for textarea elements, check out this MDN Web Documents page. To learn more about DOM events and methods, you can read more on the MDN Web Events documentation page.

Also, feel free to read about the types of React events available, or see how DOM attributes change in React. Working in tandem with Styled Components, you also have access to the as property.

Theme

global.colors.border

The color of the border.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "rgba(255, 255, 255, 0.33)", light: "rgba(0, 0, 0, 0.33)" }

global.control.border.color

The border color.

string

"border"

global.control.border.radius

The border radius.

string

"4px"

global.control.border.width

The border width.

string

"1px"

textArea.extend

Any additional style for Text.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

textArea.disabled.opacity

The opacity when the textArea is disabled.

number

0.3

global.focus.border.color

The border color of the component when in focus.

string

A hex, name, or rgb value.

"focus"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

global.focus.outline.color

The outline color around the component when in focus.

string

A hex, name, or rgb value.

"brand"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

global.focus.outline.size

The size of the outline around the component when in focus.

string

"2px"

global.focus.shadow.color

The shadow color around the component when in focus.

string

"focus"

object

An object with a color for dark and light modes.

{ dark: "string", light: "string" }

global.focus.shadow.size

The size of the shadow around the component when in focus.

string

"2px"

global.colors.placeholder

The placeholder color used for the component.

string

"#AAAAAA"

global.input.font.height

The line-height of the text.

string

"normal"

global.input.font.size

The size of the text.

string

"18px"

global.input.font.weight

The font-weight of the text. This value will only be applied if global.input.weight is undefined.

string

"bold"

number

global.input.weight

This value has been deprecated and replaced by global.input.font.weight.

string

"bold"

number

global.input.padding

The padding of the text.

string

"12px"

object

An object specifying padding for different sides of the component.


{ 
  top: "string", 
  bottom: "string", 
  left: "string", 
  right: "string", 
  horizontal: "string", 
  vertical: "string" 
}

global.input.extend

Any additional style for an input.

string

Any CSS.

css`color: 'blue'`

function

(props) => {}

global.control.disabled.opacity

The opacity when a component is disabled.

number

0.3