10.12.0

Textarea

Area where user can enter larger amounts of text. Commonly used in forms.

Default

Label

Label

Label

Custom Textarea Input

Label

Resize

auto

vertical

both

horizontal

Textarea w/ Error

Label
This field has an error!

Textarea w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).

Character Counter

Count Only
0
Max Characters
20 / 100
Max Characters w/ Blocker
100 / 100
Max Characters w/ Error
Too many characters!
94 / 75

Inline



Things to Avoid

Do not use for small text amounts (use Text Input instead). Avoid using textarea without validation if it is required and using with validation if not required.


Available Props

  • classname
  • dark
  • margin
  • margin_bottom
  • margin_left
  • margin_right
  • margin_top
  • margin_x
  • margin_y
  • max_width
  • padding
  • padding_bottom
  • padding_left
  • padding_right
  • padding_top
  • padding_x
  • padding_y
  • z_index
  • number_spacing
  • id
  • data
  • aria
  • children
  • error
  • inline
  • label
  • method
  • name
  • placeholder
  • resize
  • rows
  • value
  • character_count
  • onkeyup
  • max_characters