Textarea

Retrieve multi-line user input.

General

Basic usage.

Preview

See code

Disabled

Disable interactive textarea.

Preview

See code

Type

Differentiate states by color.

Preview

See code

Get Change

Capture changes in textarea.

Preview

See code

With useInput

Use hooks to capture changes.

Preview

See code

Imperative API

Update component in an uncontrolled way.

Preview

See code

APIs

Textarea.Props[alias: `Input.Textarea`]

Attribute	Description	Type	Accepted values	Default
value	textarea value	`string`	-	-
initialValue	textarea value	`string`	-	-
placeholder	placeholder	`string`	-	-
type	current type	`TextareaTypes`	TextareaTypes	`default`
readOnly	native attr	`boolean`	-	`false`
disabled	disable input	`boolean`	-	`false`
onChange	change event	`(e: React.ChangeEvent) => void`	-	-
resize	CSS attribute	`CSSResize`	CSSResize	`none`
...	native props	`TextareaHTMLAttributes`	`'form', 'id', 'className', ...`	-

useInput

type useInput = (initialValue: string) => {
  state: string
  setState: Dispatch<SetStateAction<string>>
  currentRef: MutableRefObject<string>
  reset: () => void
  bindings: {
    value: string
    onChange: (event: React.ChangeEvent<HTMLInputElement>) => void
  }
}

TextareaTypes

type TextareaTypes =
  | 'default'
  | 'primary'
  | 'secondary'
  | 'success'
  | 'warning'
  | 'error'
  | 'info'

CSSResize

type CSSResize =
  | 'none'
  | 'both'
  | 'horizontal'
  | 'vertical'
  | 'initial'
  | 'inherit'

Edit this page on GitHub

Text

Toggle

MADE & DESIGNED WITHBY BRUNO ANDRADE

Textarea

Textarea.Props[alias: Input.Textarea]

Textarea.Props[alias: `Input.Textarea`]