Textarea

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

Rails
React

Default

Label

Code Example

<%= pb_rails("textarea", props: { label: "Label", rows: 4}) %>

<br/>

<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text" }) %>

<br/>

<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text" }) %>

Custom Textarea Input

Label

Code Example

<%= pb_rails("textarea", props: { label: "Label"}) do %>
  <textarea class="my_custom_class" name="custom_textarea" rows=4></textarea>
<% end %>

Dark

Label

Code Example

<%= pb_rails("textarea", props: { label: "Label", rows: 4, dark: true }) %>

<br/>

<%= pb_rails("textarea", props: { label: "Label", placeholder: "Placeholder text", dark: true }) %>

<br/>

<%= pb_rails("textarea", props: { label: "Label", name: "comment", value: "Default value text", dark: true }) %>

Resize

vertical

both

horizontal

Code Example




<%= pb_rails("textarea", props: { label: "vertical", placeholder: "Resize Vertical", resize: "vertical" }) %>

<br/>

<%= pb_rails("textarea", props: { label: "both", placeholder: "Resize Both", resize: "both" }) %>

<br/>

<%= pb_rails("textarea", props: { label: "horizontal", placeholder: "Resize Horizontal", resize: "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).

Code Example

<%= pb_rails("textarea", props: { error: "This field has an error!", label: "Label", rows: 4}) %>

Textarea w/ Error

Label

This field has an error!

Code Example

<%= pb_rails("textarea", props: {
  dark: true,
  error: "This field has an error!",
  label: "Label",
  rows: 4
}) %>

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
id
data
classname
aria
children
dark
error
object
label
method
name
placeholder
resize
rows
value

4.16.0

Textarea

Things to Avoid