Textarea
Textareas collect data from the user and allow multiple lines of text.
Textarea(_.label := "Type something', will ya")()This component works with standard <form> elements. Please refer to the section on form controls to learn more about form submission and client-side validation.
Examples
Labels
Use the label attribute to give the textarea an accessible label. For labels that contain HTML, use the label slot instead.
Textarea(_.label := "Comments")()Hint
Add descriptive hint to a textarea with the hint attribute. For hints that contain HTML, use the hint slot instead.
Textarea(_.label := "Feedback", _.hint := "Please tell us what you think.")()Rows
Use the rows attribute to change the number of text rows that get shown.
Textarea(_.rows := 2)()Placeholders
Use the placeholder attribute to add a placeholder.
Textarea(_.placeholder := "Type something")()Appearance
Use the appearance attribute to change the textarea's visual appearance.
Textarea(_.placeholder := "Type something", _.appearance := "filled")()Disabled
Use the disabled attribute to disable a textarea.
Textarea(_.placeholder := "Textarea", _.disabled := true)()Value
Use the value attribute to set an initial value.
Textarea(_.value := "Write something awesome!")()Sizes
Use the size attribute to change a textarea's size.
Textarea(_.placeholder := "Small", _.size.small)()Textarea(_.placeholder := "Medium", _.size.medium)()Textarea(_.placeholder := "Large", _.size.large)()Prevent Resizing
By default, textareas can be resized vertically by the user. To prevent resizing, set the resize attribute to none.
Textarea(_.resize.none)()Expand with Content
Textareas will automatically resize to expand to fit their content when resize is set to auto.
Textarea(_.resize.auto)()Resize horizontal
Textareas can be made to resize horizontally when resize is set to "horizontal"
Textarea(_.resize.horizontal)()Resize both
Textareas can be made to resize both vertically and horizontally when resize is set to "both"
Textarea(_.resize.both)()