Area where user can enter larger amounts of text. Commonly used in forms.
<%= 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" }) %>
<%= pb_rails("textarea", props: { label: "Label"}) do %> <textarea class="my_custom_class" name="custom_textarea" rows=4></textarea> <% end %>
<%= pb_rails("textarea", props: { label: "auto", placeholder: "Resize Auto", resize: "auto" }) %> <br/> <%= 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 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).
<%= pb_rails("textarea", props: { error: "This field has an error!", label: "Label", rows: 4}) %>
<% text_area_2_value = "Counting characters!" %> <% text_area_3_value = "This counter prevents the user from exceeding the maximum number of allowed characters. Just try it!" %> <% text_area_4_value = "This counter alerts the user that they have exceeded the maximum number of allowed characters." %> <%= pb_rails("textarea", props: { character_count: 0, id: "text-area-1", label: "Count Only", onkeyup: "handleChange1(event)", }) %> <%= pb_rails("textarea", props: { character_count: text_area_2_value.length, id: "text-area-2", label: "Max Characters", max_characters: 100, onkeyup: "handleChange2(event, 100)", value: text_area_2_value, }) %> <%= pb_rails("textarea", props: { character_count: text_area_3_value.length, id: "text-area-3", label: "Max Characters w/ Blocker", max_characters: 100, onkeyup: "handleChange3(event, 100)", value: text_area_3_value, }) %> <%= pb_rails("textarea", props: { character_count: text_area_4_value.length, error: "Too many characters!", id: "text-area-4", label: "Max Characters w/ Error", max_characters: 75, onkeyup: "handleChange4(event, 75)", value: text_area_4_value, }) %> <script type="text/javascript"> const characterCount1 = document.querySelector("#text-area-1 .pb_caption_kit_xs") const characterCount2 = document.querySelector("#text-area-2 .pb_caption_kit_xs") const characterCount3 = document.querySelector("#text-area-3 .pb_caption_kit_xs") const characterCount4 = document.querySelector("#text-area-4 .pb_caption_kit_xs") const textArea3 = document.querySelector("#text-area-3 textarea") const textArea4 = document.querySelector("#text-area-4 textarea") const handleChange1 = (event) => { characterCount1.innerHTML = event.target.value.length } const handleChange2 = (event, maxCharacters) => { characterCount2.innerHTML = `${event.target.value.length} / ${maxCharacters}` } const handleChange3 = (event, maxCharacters) => { if (event.target.value.length > maxCharacters) { textArea3.value = event.target.value.substring(0, maxCharacters) } characterCount3.innerHTML = `${textArea3.value.length} / ${maxCharacters}` } const handleChange4 = (event, maxCharacters) => { characterCount4.innerHTML = `${textArea4.value.length} / ${maxCharacters}` } </script>
<%= pb_rails("textarea", props: { inline: true, resize: "auto", rows: 1, value:"Try clicking into this text." }) %>
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.