The tel input uses HTML's native tel input and allows a user to enter a telephone number. Telephone numbers can also be entered with standard text inputs but some browsers (especially mobile ones) may improve the experience of entering telephone numbers by showing a different keypad.
The tel input has no unique props but can make use of the following universal
FormKit props.
| Prop | Type | Default | Description | ||
|---|---|---|---|---|---|
| Commonly used native attributes | |||||
| maxlength | Number | none | View on MDN | ||
| minlength | Number | none | View on MDN | ||
| placeholder | String | none | View on MDN | ||
| Show Universal Props | |||||
| config | Object | {} | Configuration options to provide to the input’s node and any descendent node of this input. | ||
| delay | Number | 20 | Number of milliseconds to debounce an input’s value before the commit hook is dispatched. | ||
| errors | Array | [] | Array of strings to show as error messages on this field. | ||
| help | String | '' | Text for help text associated with the input. | ||
| id | String | input_{n} | The unique id of the input. Providing an id also allows the input’s node to be globally accessed. | ||
| ignore | Boolean | false | Prevents an input from being included in any parent (group, list, form etc). Useful when using inputs for UI instead of actual values. | ||
| label | String | '' | Text for the label element associated with the input. | ||
| name | String | input_{n} | The name of the input as identified in the data object. This should be unique within a group of fields. | ||
| preserve | boolean | false | Preserves the value of the input on a parent group, list, or form when the input unmounts. | ||
| sections-schema | Object | {} | An object of section keys and schema partial values, where each schema partial is applied to the respective section. | ||
| type | String | text | The type of input to render from the library. | ||
| validation | String, Array | [] | The validation rules to be applied to the input. | ||
| validation-visibility | String | blur | Determines when to show an input's failing validation rules. Valid values are blur, dirty, and live. | ||
| validation-label | String | {label prop} | Determines what label to use in validation error messages, by default it uses the label prop if available, otherwise it uses the name prop. | ||
| validation-rules | Object | {} | Additional custom validation rules to make available to the validation prop. | ||
| Section-key | Description |
|---|---|
| outer | The outermost wrapping element. |
| wrapper | A wrapper around the label and input. |
| label | The label of the input. |
| prefix | Has output by default, but allows content directly before an input element. |
| inner | A wrapper around the actual input element. |
| suffix | Has output by default, but allows content directly after an input element. |
| input | The input element itself. |
| help | The element containing help text. |
| messages | A wrapper around all the messages. |
| message | The element (or many elements) containing a message — most often validation and error messages. |