Supported Controls#
TemplateX reads fields from:
<input><textarea><select>
It ignores button-like input types such as submit, button, reset, image, and file.
Common controls work as expected:
{{ form:intake }} <form> <label>Service</label> <select name="service" required> <option value="">Choose one</option> <option value="design">Design</option> </select> {{ form:error:service }} <label>Message</label> <textarea name="message" required></textarea> {{ form:error:message }} <fieldset> <legend>Budget</legend> <label><input type="radio" name="budget" value="small" required> Small</label> <label><input type="radio" name="budget" value="large"> Large</label> {{ form:error:budget }} </fieldset> <fieldset> <legend>Interests</legend> <label><input type="checkbox" name="interests[]" value="strategy"> Strategy</label> <label><input type="checkbox" name="interests[]" value="build"> Build</label> {{ form:error:interests }} </fieldset> </form>{{ /form:intake }}Required And Email Validation#
required fields are validated on submit.
Fields with type="email" are checked as email addresses.
You can customize the email validation message with an error-email attribute:
<input name="email" type="email" required error-email="Use a valid email address.">{{ form:error:email }}TemplateX removes the error-email attribute from the final input.
Labels#
Each field should have an accessible label. TemplateX accepts:
- a wrapping
<label> - a
<label for="...">connected to an inputid - a label directly before the field
aria-label- a
form:fieldlabel
Missing labels produce diagnostics during compile.
Custom Controls#
Use form:field when a custom UI needs to submit a hidden value:
{{ form:intake }} {{ form:field service label="Service" required }} <div data-custom-select></div> <input type="hidden"> {{ form:error:service }} {{ /form:field }}{{ /form:intake }}TemplateX adds the field name, required state, and form metadata to the control.