Textarea
Generates a <textarea> with options to control the number of rows (the height)
of the element.
For common form layout options, check the form styleguide
Example usage
{{
form.textarea({
'label': 'Textarea',
'id': 'foo'
})
}}
See the Pen docs - form - textarea by Pulsar (@pulsar) on CodePen.
Options applied to parent wrapper
| Option | Type | Description |
|---|---|---|
| class | string | A space separated list of class names |
| guidance | string | Text to be displayed in a popover, adds a (?) icon after the input |
| guidance-container | string | Element to bind guidance popover scroll behaviour to (default body) |
| help | string | Additional guidance information to be displayed next to the input |
| label | string | Text for the <label> companion element |
| required | bool | Visually indicates that the field must be completed |
Options applied to input
| Option | Type | Description |
|---|---|---|
| autofocus | bool | Whether the field should have input focus on page load |
| form | string | Specific one or more forms this label belongs to |
| id | string | A unique identifier, if required |
| name | string | The name of this control |
| placeholder | string | A short hint that describes the expected value |
| required | bool | Adds required and aria-required="true" attributes |
| rows | integer | The height, in rows (default 2) |
| value | string | Specifies the value of the input |
| data-* | string | Data attributes, eg: 'data-foo': 'bar' |
*Any other options not listed here will be applied to the input.
Error state
{{
form.textarea({
'label': 'Textarea',
'error': 'Something went wrong',
...
See the Pen docs - form - textarea error by Pulsar (@pulsar) on CodePen.
Rows
The height of a textarea can be increased by defining a number of rows that suits your expected input. If you expect a lot of content, provide more rows.
{{
form.textarea({
'label': 'Large textarea',
'id': 'foo',
'rows': 5
})
}}
See the Pen docs - form - textarea by Pulsar (@pulsar) on CodePen.