Edit this page
[?] Component size, gzipped: 107kb

Textarea

Examples

Basic usage

States



Sizes



Allow the user to resize

By default, Textarea is not resizeable. However, you can use overrides as in the example above to supply minimum and maximum dimensions for the component. This will allow users to resize the Textarea within the boundaries you define.

Focus and ref


Stateful (uncontrolled) usage

As with many of our components, there is also an uncontrolled version, StatefulTextarea, which manages its own state.

Overrides

Additionally, you can fully customize any part of the Textarea through the overrides prop. The Textarea consists of multiple subcomponents that are listed bellow and you can override each one of them. To help you identify the names of these subcomponents, you can highlight them through this selector:

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

API

Textarea API

"aria-label" nullable string required

Sets aria-label attribute.

"aria-labelledby" nullable string required

Sets aria-labelledby attribute.

"aria-describedby" nullable string required

Sets aria-describedby attribute.

adjoined $Keys<typeof ADJOINED> required

Defines styles for inputs that are grouped with other controls.

$Keys{ none: "none", left: "left", right: "right", both: "both" }

autoComplete string required

Determines if browser should provide value suggestions.

autoFocus boolean = false

If true the input will be focused on the first mount.

disabled boolean = false

Renders component in 'disabled' state.

error boolean = false

Renders component in 'error' state.

positive boolean

Renders component in 'positive' state.

pattern nullable string required

A regex that is used to validate the value of the input on form submission.

id string required

Id attribute value to be added to the input element and as a label's for attribute value.

"data-baseweb" string

inputMode string required

A hint as to the type of data that might be entered by the user while editing the element or its contents.

inputRef ElementRef<*>

A ref to access an input element.

ElementRef*

name string = ""

onBlur function = () => undefined

SyntheticFocusEvent<T> => mixed

onChange function = () => undefined

SyntheticInputEvent<T> => mixed

onKeyDown function = () => undefined

SyntheticKeyboardEvent<T> => mixed

onKeyPress function = () => undefined

SyntheticKeyboardEvent<T> => mixed

onKeyUp function = () => undefined

SyntheticKeyboardEvent<T> => mixed

onFocus function = () => undefined

SyntheticFocusEvent<T> => mixed

clearable boolean required

If true, adds a clear value icon button to the end of the input container.

overrides object = {}

InputContainer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Input { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Before { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
After { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ClearIcon { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ClearIconContainer { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
MaskToggleButton { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
MaskToggleShowIcon { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
MaskToggleHideIcon { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

placeholder string = ""

required boolean = false

Renders component in 'required' state.

size $Keys<typeof SIZE> =

Renders component in provided size.

$Keys{ default: "default", compact: "compact", large: "large" }

type string required

Input type attribute.

value string = ""

Input value attribute.

rows number

rows number = 3

Sets the size and number of visible text lines of the texarea element.

Textarea exports

You can import this module like so:

import {Textarea} from 'baseui/textarea'

It exports the following components or utility functions:

  • Textarea
  • StatefulTextarea
  • StatefulContainer
  • StyledTextareaContainer
  • StyledTextarea
  • STATE_CHANGE_TYPE
  • SIZE