grommet
components

TextArea

a control to input multiple lines of text

Storybook
CodeSandbox

Props

fill

Whether the width and height should fill the container.
truefalse

focusIndicator

Whether the plain textarea should receive a focus outline.
truefalse

id

The id attribute of the textarea.
"string"

name

The name attribute of the textarea.
"string"

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"

plain

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

truefalse

resize

Whether user is allowed to resize the textarea.
"vertical""horizontal"truefalse

size

The size of the TextArea.
"small""medium""large""xlarge""string"

value

What text to put in the textarea.
"string"

Theme

global.colors.border

The color of the border.
{
  "dark": "rgba(255,255,255,0.33)",
  "light": "rgba(0,0,0,0.33)"
}

global.control.border.color

The border color.
"border"

global.control.border.radius

The border radius.
"4px"

global.control.border.width

The border width.
"1px"

textArea.extend

Any additional style for Text.
"any CSS"
(props) => {}

textArea.disabled.opacity

The opacity when the textArea is disabled.
number

global.focus.border.color

The color around the component when in focus.
"focus"

global.colors.placeholder

The placeholder color used for the component.
"#AAAAAA"

global.input.weight

The font weight of the text entered.
600

global.input.padding

The padding of the text.
"12px"

global.control.disabled.opacity

The opacity when a component is disabled.
0.3