Textarea
About
What does it do?
- Allows users to enter more than one line of text.
- Allows users to write whatever they like, also called free text.
When to use it?
- When the user needs to enter lots of text. For example, a paragraph.
When not to use it?
- When the user needs to enter one line of text. Use the input component instead.
- Use fixed-width inputs for content that has a known length, e.g. postcode.
- When there are limited options. Use a different form element that limits the options.
HTML markup
<div class="wmnds-fe-group wmnds-m-t-20">
<label class="wmnds-fe-label wmnds-m-t-20" for="example-textarea">Textarea label</label>
<textarea class="wmnds-fe-textarea" id="example-textarea" name="example-textarea" rows="2" maxLength="200" placeholder="Textarea placeholder..." required="true"></textarea>
</div>
Nunjucks markup
{% from "wmnds/components/form-elements/textarea/_textarea.njk" import wmndsTextarea %}
{{
wmndsTextarea({
id: "example-textarea",
name: "example-textarea",
rows: "2",
required: true,
error: false,
errorMessage: {
id: null,
contentText: null,
contentHTML: "<span>Custom <em>error message</em></span>",
classes: null
}
classes: null,
value: "",
label: {
contentText: "Textarea label",
contentHTML: "<span>Textarea label <em>updated</em></span>",
classes: "wmnds-m-t-20"
},
disabled: false,
maxLength: "200",
placeholder: "Textarea placeholder...",
formGroup: {
classes: "wmnds-m-t-20"
},
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| id | string | Required. Must be unique. The id of the textarea. |
| name | string | Required. The name of the textarea, which is submitted with the form data. |
| rows | string | Optional number of textarea rows. Default is 3 rows. |
| required | boolean | If true, textarea is required/must be filled out. Defaults to false. |
| error | boolean | If true, an error will be displayed. Defaults to false. |
| errorMessage | object | Options for the error message component. See errorMessage. |
| classes | string | Classes to add to the textarea. |
| value | string | Optional initial value of the textarea. |
| label | Object | Required. Options for the label component. See label. |
| disabled | boolean | If true, textarea should be disabled. Defaults to false. |
| maxLength | string | The maxLength is the maximum number of characters allowed in the text area. It's an optional field. |
| placeholder | string | Placeholder is a short hint that describes the expected value of a text area. It's an optional field. |
| formGroup | Object | Options for the form-group wrapper See formGroup below. |
Options for errorMessage
| Name | Type | Description |
|---|---|---|
| id | string | Id attribute to add to the error message span tag. |
| contentText | string | Required. Text to use within the error message. If contentHTML is supplied, this is ignored. |
| contentHTML | string | Required. HTML to use within the error message |
| classes | string | Classes to add to the error message span tag. |
Options for label
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. If contentHTML is set, this is not required. Text to use within the label. If contentHTML is provided, the contentText argument will be ignored. |
| contentHTML | string | Required. If contentText is set, this is not required. HTML to use within the label. If contentHTML is provided, the contentText argument will be ignored. |
| classes | string | Classes to add to the label tag. |
Options for formGroup
| Name | Type | Description |
|---|---|---|
| classes | string | Classes to add to the form group (e.g. to show error state for the whole group) |
Textarea with error
HTML markup
<div class="wmnds-fe-group wmnds-m-t-20 wmnds-fe-group--error">
<label class="wmnds-fe-label wmnds-m-t-20" for="error-textarea">Textarea label</label>
<span class="wmnds-fe-error-message">Textarea custom error message</span>
<textarea class="wmnds-fe-textarea wmnds-fe-input--error" id="error-textarea" name="error-textarea" rows="2" maxLength="200" placeholder="Textarea placeholder..." required="true"></textarea>
</div>
Nunjucks markup
{% from "wmnds/components/form-elements/textarea/_textarea.njk" import wmndsTextarea %}
{{
wmndsTextarea({
id: "example-textarea",
name: "example-textarea",
rows: "2",
required: true,
error: false,
errorMessage: {
id: null,
contentText: null,
contentHTML: "<span>Custom <em>error message</em></span>",
classes: null
}
classes: null,
value: "",
label: {
contentText: "Textarea label",
contentHTML: "<span>Textarea label <em>updated</em></span>",
classes: "wmnds-m-t-20"
},
disabled: false,
maxLength: "200",
placeholder: "Textarea placeholder...",
formGroup: {
classes: "wmnds-m-t-20"
},
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| id | string | Required. Must be unique. The id of the textarea. |
| name | string | Required. The name of the textarea, which is submitted with the form data. |
| rows | string | Optional number of textarea rows. Default is 3 rows. |
| required | boolean | If true, textarea is required/must be filled out. Defaults to false. |
| error | boolean | If true, an error will be displayed. Defaults to false. |
| errorMessage | object | Options for the error message component. See errorMessage. |
| classes | string | Classes to add to the textarea. |
| value | string | Optional initial value of the textarea. |
| label | Object | Required. Options for the label component. See label. |
| disabled | boolean | If true, textarea should be disabled. Defaults to false. |
| maxLength | string | The maxLength is the maximum number of characters allowed in the text area. It's an optional field. |
| placeholder | string | Placeholder is a short hint that describes the expected value of a text area. It's an optional field. |
| formGroup | Object | Options for the form-group wrapper See formGroup below. |
Options for errorMessage
| Name | Type | Description |
|---|---|---|
| id | string | Id attribute to add to the error message span tag. |
| contentText | string | Required. Text to use within the error message. If contentHTML is supplied, this is ignored. |
| contentHTML | string | Required. HTML to use within the error message |
| classes | string | Classes to add to the error message span tag. |
Options for label
| Name | Type | Description |
|---|---|---|
| contentText | string | Required. If contentHTML is set, this is not required. Text to use within the label. If contentHTML is provided, the contentText argument will be ignored. |
| contentHTML | string | Required. If contentText is set, this is not required. HTML to use within the label. If contentHTML is provided, the contentText argument will be ignored. |
| classes | string | Classes to add to the label tag. |
Options for formGroup
| Name | Type | Description |
|---|---|---|
| classes | string | Classes to add to the form group (e.g. to show error state for the whole group) |