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 border color of the component when in focus.

"focus"

global.focus.outline.color

The outline color around the component when in focus.

string | { dark: string, light: string }

global.focus.outline.size

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

string

global.focus.shadow.color

The shadow color around the component when in focus.

"focus"

global.focus.shadow.size

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

"2px"

global.colors.placeholder

The placeholder color used for the component.

"#AAAAAA"

global.input.font.height

The line-height of the text.

string

global.input.font.size

The size of the text.

string

global.input.font.weight

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

global.input.weight

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

number | string

global.input.padding

The padding of the text.

{
  "horizontal": "11px",
  "vertical": "11px"
}

global.control.disabled.opacity

The opacity when a component is disabled.

0.3