P17

This form has been designed such that each field has three states: valid (green), invalid (red), and unvalidated (blue).

  • On page load, all fields are in the unvalidated state.
  • Clicking Quick fill then Submit will populate each field with valid data and set them all too unvalidated.
  • Clicking Reset will remove the value from each field and set them all too unvalidated.
  • Clicking Unvalidate will set all fields to unvalidated without changing field values.
  • Clicking Submit will run formatting and validation. Fields with errors will be set to the error state while valid fields the valid state.
  • After a failed submission, when focusing on or modifying a field it reverts to the unvalidated state to indicate the input has been touched. This allows the user to see which errors they've corrected and which remain.

type = 'text'

type = 'number'

type = 'int' | 'integer'

type = 'email'

type = 'tel' | 'phone' | 'telephone'

type = 'url' | 'link'
Requires scheme, e.g. 'https://'.

type = 'password' | 'sensitive'

type = 'checkbox'

Checkbox Group

type = 'checkboxgroup'
Field specific props: ['options']

Radio Group

type = 'radiogroup'
Field specific props: ['options']

type = 'slider'
Standard attributes min, max, and step should be used as configuration.

-16

type = 'select' | 'dropdown'
Field specific props: ['options']

Name Value Label
field_hidden Sneaky boy
field_text Text
field_search Search
field_number Number
field_integer Integer
field_email Email
field_tel Telephone
field_url URL
field_password Password or Sensitive
field_checkbox false Checkbox
field_checkbox_group Checkbox Group
field_radio_group Radio Group
field_slider -16 Slider or Range
field_select Select or Dropdown