Forms

Examples of form controls.

Form group


  <div class="form-group">
    ...
  </div>

Form label


  <label class="form-label">...</label>

Form required


  <span class="form-required"></span>

Form control


  <input type="text" class="form-control">


  <select class="form-control">
    <option value="...">..</option>
    ...
  </select>


  <textarea class="form-control">
    ...
  </textarea>

Text Input

Open this example in a new window


  {{ TextInput({
    "label": "Default (Primary)",
    "name": "text-input_name",
    "id": "text-input_1",
    "type": "",
    "classes": "",
    "tooltip": "Lorem ipsum, dolor sit amet consectetur adipisicing elit. Odit, quaerat?",
    "required": true,
    "validation_message": "Lorem ipsum dolor sit amet.",
    "disabled": false,
    "readonly": false,
    "pattern": "",
    "maxlength": "",
    "min": "",
    "max": ""
  }) }}

Nunjucks macro options

Name	Type	Description
label	string
name	string	Required. One word, no spaces or special characters, you can use underscores and hyphens.
id	string	Required. One word, no spaces or special characters, you can use underscores and hyphens.
type	string	Any of the following input types: color, date, datetime-local, email, file, month, number, password, range, search, tel, text, textarea time, url, week
classes	string	Space-delimited list of classes
hint	string	A simple line of text that explains to the user what information should be supplied in the field
required	boolean	true or false
validation_message	string	A simple line of text that explains to the user what information should be supplied in the field
disabled	boolean	true or false
readonly	boolean	true or false
pattern	string	A regular expression that the input element's value is validated against
maxlength	number	The maximum number of characters allowed. Default value is 524288
min	number	For the date input type this specifies the minimum date allowed. For the number input type this specifies the minimum value allowed
max	number	For the date input type this specifies the maximum date allowed. For the number input type this specifies the maximum value allowed