Text Input
About
What does it do?
- Allows users to enter text.
When to use it?
- When user needs to enter short amount of text, e.g. name, email.
When not to use it?
- When user needs to add a lot of text that might go over multiple lines
- Use fixed width inputs for content that has known length, e.g. postcode.
HTML markup
<div class="wmnds-fe-group">
<label class="wmnds-fe-label" for="input">Form label</label>
<input class="wmnds-fe-input" id="input" name="input" type="text" value="" />
</div>
Nunjucks markup
{% from "wmnds/components/form-elements/text-input/_text-input.njk" import wmndsTextInput %}
{{
wmndsTextInput({
id: "example-input",
name: "example-input",
type: "text",
required: true,
classes: null,
error: false,
errorMessage: {
id: null,
contentText: "Custom error message for this example input",
contentHTML: null,
classes: null
},
disabled: false,
maxLength: "200",
placeholder: "input placeholder...",
value: "",
label: {
contentText: "input label",
contentHTML: "<span>input label <em>updated</em></span>",
classes: "wmnds-m-t-20"
},
formGroup: {
classes: "wmnds-m-t-20"
}
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| id | string | Required. Must be unique. The id of the input. |
| name | string | Required. The name of the input, which is submitted with the form data. |
| type | string | Type of input control to render. Defaults to text. |
| required | boolean | If true, input is required/must be filled out. Defaults to false. |
| classes | string | Classes to add to the input component. |
| error | boolean | If true, error will be displayed. Defaults to false. |
| errorMessage | object | Options for the error message component. See errorMessage. |
| disabled | boolean | If true, input should be disabled. Defaults to false. |
| maxLength | string | The maxLength is the maximum number of characters allowed in the input. It's an optional field. |
| placeholder | string | Placeholder is a short hint that describes the expected value of a input. It's an optional field. |
| value | string | Optional initial value of the input. |
| label | object | Required. Options for the label component. See label. |
| formGroup | object | Options for the form-group wrapper. See formGroup options 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. If contentHTML is provided, the contentText argument will be ignored. |
| 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) |
Text input with error
HTML markup
<div class="wmnds-fe-group wmnds-fe-group--error">
<label class="wmnds-fe-label" for="error-input">Form label</label>
<span class="wmnds-fe-error-message">Input custom error message</span>
<input class="wmnds-fe-input wmnds-fe-input--error" id="error-input" name="error-input" type="text" value="" />
</div>
Nunjucks markup
{% from "wmnds/components/form-elements/text-input/_text-input.njk" import wmndsTextInput %}
{{
wmndsTextInput({
id: "example-input",
name: "example-input",
type: "text",
required: true,
classes: null,
error: false,
errorMessage: {
id: null,
contentText: "Custom error message for this example input",
contentHTML: null,
classes: null
},
disabled: false,
maxLength: "200",
placeholder: "input placeholder...",
value: "",
label: {
contentText: "input label",
contentHTML: "<span>input label <em>updated</em></span>",
classes: "wmnds-m-t-20"
},
formGroup: {
classes: "wmnds-m-t-20"
}
})
}}Nunjucks properties
| Name | Type | Description |
|---|---|---|
| id | string | Required. Must be unique. The id of the input. |
| name | string | Required. The name of the input, which is submitted with the form data. |
| type | string | Type of input control to render. Defaults to text. |
| required | boolean | If true, input is required/must be filled out. Defaults to false. |
| classes | string | Classes to add to the input component. |
| error | boolean | If true, error will be displayed. Defaults to false. |
| errorMessage | object | Options for the error message component. See errorMessage. |
| disabled | boolean | If true, input should be disabled. Defaults to false. |
| maxLength | string | The maxLength is the maximum number of characters allowed in the input. It's an optional field. |
| placeholder | string | Placeholder is a short hint that describes the expected value of a input. It's an optional field. |
| value | string | Optional initial value of the input. |
| label | object | Required. Options for the label component. See label. |
| formGroup | object | Options for the form-group wrapper. See formGroup options 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. If contentHTML is provided, the contentText argument will be ignored. |
| 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) |