The date input uses HTML's native date picker to allow users to easily select a date.
Need more flexibility than the native HTML date input provides? Check out the datepicker input available in FormKit Pro.
The internal format of all native date pickers is YYYY-MM-DD. This is true even though the format of the date displayed to the user may be different. For example U.S. based browsers display date format as MM/DD/YYYY.
The date input has no unique props but can make use of the following universal
FormKit props.
| Prop | Type | Default | Description | ||
|---|---|---|---|---|---|
| Commonly used native attributes | |||||
| min | Number | -- | View on MDN | ||
| max | Number | -- | View on MDN | ||
| step | Number | auto | 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. | ||
| dirtyBehavior | string | touched | Determines how the "dirty" flag of this input is set. Can be set to touched or compare — touched (the default) is more performant, but will not detect when the form is once again matching its initial state. | ||
| 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. | ||
| index | Number | undefined | Allows an input to be inserted at the given index if the parent is a list. If the input’s value is undefined, it inherits the value from that index position. If it has a value it inserts it into the lists’s values at the given index. | ||
| 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. | ||
| parent | FormKitNode | contextual | By default the parent is a wrapping group, list or form — but this props allows explicit assignment of the parent node. | ||
| prefix-icon | String | '' | Specifies an icon to put in the prefixIcon section. | ||
| preserve | boolean | false | Preserves the value of the input on a parent group, list, or form when the input unmounts. | ||
| preserve-errors | boolean | false | By default errors set on inputs using setErrors are automatically cleared on input, setting this prop to true maintains the error until it is explicitly cleared. | ||
| sections-schema | Object | {} | An object of section keys and schema partial values, where each schema partial is applied to the respective section. | ||
| suffix-icon | String | '' | Specifies an icon to put in the suffixIcon 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. | ||
| value | Any | undefined | Seeds the initial value of an input and/or its children. Not reactive. Can seed entire groups (forms) and lists.. | ||
You can target a specific section of an input using that section's "key", allowing you to modify that section's classes, HTML (via :sections-schema, or content (via slots)). Read more about sections here.
| Section-key | Description |
|---|---|
| outer | The outermost wrapping element. |
| wrapper | A wrapper around the label and input. |
| label | The label of the input. |
| prefix | Has no output by default, but allows content directly before an input element. |
| prefixIcon | An element for outputting an icon before the prefix section. |
| inner | A wrapper around the actual input element. |
| suffix | Has no output by default, but allows content directly after an input element. |
| suffixIcon | An element for outputting an icon after the suffix section. |
| 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. |
All FormKit inputs are designed with the following accessibility considerations in mind. Help us continually improve accessibility for all by filing accessibility issues here:
| Section Key | Attribute | Default | Description |
|---|---|---|---|
| label | label | for | Associates the label to an input element. Users can click on the label to focus the input or to toggle between states. |
| input | input | disabled | Disables an HTML element, preventing user interaction and signaling a non-interactive state. |
| aria-describedby | Associates an element with a description, aiding screen readers. | ||
| aria-required | Adds this attribute when validation is required. | ||
| icon | icon | for | Whenever icon is defined as a label it links it to an input element. |
| Keyboard Event | Description |
|---|---|
| Tab | Moves the focus to the next focusable input on the page. |
| Shift + Tab | Moves the focus to the previous focusable input on the page. |