Textarea

Retrieve multi-line user input.

General

Basic usage.

Disabled

Disable interactive textarea.

Type

Differentiate states by color.

Variants

Use filled, light, ghost or subtle to change the surface of any colored Textarea.

Rounded

You can completely round the corners of any type of Textarea with the rounded property.

Get Change

Capture changes in textarea.

With useInput

Use hooks to capture changes.

Imperative API

Update component in an uncontrolled way.

APIs

Textarea.Props[alias: Input.Textarea]

AttributeDescriptionTypeAccepted valuesDefault
valuetextarea valuestring--
initialValuetextarea valuestring--
placeholderplaceholderstring--
typecurrent typeTextareaTypesTextareaTypesdefault
readOnlynative attrboolean-false
disableddisable inputboolean-false
roundedround cornersboolean-false
filledfilled variantboolean-false
lightlight variantboolean-false
ghostoutline variantboolean-false
subtlesubtle variantboolean-false
onChangechange event(e: React.ChangeEvent) => void--
resizeCSS attributeCSSResizeCSSResizenone
...native propsTextareaHTMLAttributes'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