See textfield.config.js for how to toggle ‘invalid’ and ‘required’ text field states, including the description text during development.
<div id="{{ textfield.component_id }}" class="c-textfield js-textfield {{#if textfield.invalid_description_id }}is-invalid{{/if}}">
<label for="{{ textfield.input_id }}">{{ textfield.label }} {{#if textfield.sublabel }}<em>{{ textfield.sublabel }}</em>{{/if}}</label>
<input
id="{{ textfield.input_id }}"
type="{{ textfield.type }}"
name="{{ textfield.name }}"
autocomplete="{{ textfield.autocomplete }}"
value="{{ textfield.value }}"
list="{{ textfield.list }}"
minlength="{{ textfield.minlength }}"
maxlength="{{ textfield.maxlength }}"
{{#if textfield.general_description_id }}aria-describedby="{{ textfield.general_description_id }}{{#if textfield.invalid_description_id }} {{ textfield.invalid_description_id }}{{/if}}"{{/if}}
{{#if textfield.required}}class="require-me"{{/if}}
{{#if textfield.readonly}}class="readonly"{{/if}}
{{#if textfield.invalid_description_id }}aria-invalid="true"{{/if}}>
{{#if textfield.general_description_id }}
<div id="{{ textfield.general_description_id }}" class="c-textfield__general-description">{{ textfield.general_description }}</div>
{{/if}}
<div id="{{ textfield.invalid_description_id }}" class="c-textfield__invalid-description js-invalid-description" {{#unless textfield.invalid_description_id }}hidden{{/unless}}>{{ textfield.invalid_description }}</div>
</div>
{
"textfield": {
"component_id": "id-1",
"input_id": "id-2",
"label": "Text Field for a Name",
"type": "text",
"name": "",
"autocomplete": "name",
"value": "",
"list": "",
"minlength": "",
"maxlength": "",
"general_description": "More info about this field.",
"general_description_id": "id-3",
"required": true,
"readonly": false,
"invalid_description": "This field is required.",
"invalid_description_id": "id-4"
}
}
<div id="id-1" class="c-textfield js-textfield is-invalid">
<label for="id-2">Text Field for a Name </label>
<input id="id-2" type="text" name="" autocomplete="name" value="" list="" minlength="" maxlength="" aria-describedby="id-3 id-4" class="require-me" aria-invalid="true">
<div id="id-3" class="c-textfield__general-description">More info about this field.</div>
<div id="id-4" class="c-textfield__invalid-description js-invalid-description">This field is required.</div>
</div>