Introducing KickStart — AI generated FormKit forms in seconds. Generate from a screenshot, edit with drag-and-drop or conversational AI, copy & paste as components or schema!
Try for free
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. |