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 unit input allows for restricted input of values based on the provided unit (distance, weight, temperature, etc.) and locale.
The unit prop is the type of unit you want to display. A full list of allowed unit types are listed below:
The display length can be modified by the unitDisplay property. Accepted values are short, narrow, and long.
By default the locale will use what you have set in your formkit.config.ts as the desired locale. However you can override this with the displayLocale prop. For example, en-US, de-DE, en-IN, zh-CN, etc, etc.
By default the decimals will display when the value contains the unit/locale decimal separator and will show default formatting decimal places to display for the given unit, however you can override this. By setting decimals to false or 0, the value will not allow decimals or setting decimals to a numeric value will limit the maximum decimal places to that value.
You can also choose to set a minimum number of decimals with the minDecimals prop. For example, you always want to show 2 decimal places you would set minDecimals="2".
Similar to a number input, you can set a min and max value.
Again, similar to a number input you can use the up/down keys to step the value. By default the step is 1 but you can override that with this prop.
The value of the input itself defaults to a number but can be formatted as a string to include information about the unit itself.
The unit input also allows for first-party conversion of one unit type to another. In this example, we will use unit of type mile, but the value
itself will be converted to kilometers when setting value-unit to kilometer.
The unit prop is optional, allowing for unitless values.
In order to convert one unit to another, they must be in the same taxonomy (so for example, you can not convert kilometers to liters).
| Prop | Type | Par défaut | Description |
|---|---|---|---|
| unit | string | undefined | Set the specified unit to use for this input. If undefined, will allow for unitless values. | |
| displayLocale | string | en-US | Set the desired display locale to use for this input |
| decimals | boolean|number | null | Choose to either completely disallow decimals or override the maximum number of decimals for the input |
| minDecimals | number | null | Choose to show a minimum number of decimals should your input require this |
| min | number | null | Minimum numeric value allowed. If zero or above, negatives will not be allowed |
| max | number | null | Maximum numeric value allowed for this input |
| step | number | 1 | When using the up/down keys, how much to modify the current value. |
| valueDecimals | string | number | undefined | Determines the allowed number of decimals for the valueUnit. |
| valueFormat | string | number | Choose between number and string whether you want a numeric value or a parsed string value |
| valueUnit | string | undefined | Used to convert the user-inputted value from one unit to another |
| unitDisplay | string ('narrow' | 'short' | 'long') | short | Determines the length of the how the unit is represented. |
| Afficher Universel props | |||
| config | Object | {} | Options de configuration à fournir au nœud d'entrée et à tout nœud descendant de cette entrée. |
| delay | Number | 20 | Nombre de millisecondes à attendre avant que la valeur d'une entrée ne soit déclenchée avant que le commit hook ne soit déclenché. |
| dirtyBehavior | string | touched | Détermine comment le drapeau "dirty" de cette entrée est défini. Peut être défini sur touched ou compare — touched (par défaut) est plus performant, mais ne détectera pas lorsque le formulaire correspond à nouveau à son état initial. |
| errors | Array | [] | Tableau de chaînes à afficher comme messages d'erreur sur ce champ. |
| help | String | '' | Texte pour le texte d'aide associé à l'entrée. |
| id | String | input_{n} | L'identifiant unique de l'entrée. Fournir un identifiant permet également d'accéder globalement au nœud de l'entrée. |
| ignore | Boolean | false | Empêche une entrée d'être incluse dans un parent (groupe, liste, formulaire, etc). Utile lors de l'utilisation d'entrées pour l'interface utilisateur au lieu de valeurs réelles. |
| index | Number | undefined | Permet d'insérer une entrée à l'index donné si le parent est une liste. Si la valeur de l'entrée est indéfinie, elle hérite de la valeur de cette position d'index. Si elle a une valeur, elle l'insère dans les valeurs de la liste à l'index donné. |
| label | String | '' | Texte pour l'élément label associé à l'entrée. |
| name | String | input_{n} | Le nom de l'entrée tel qu'identifié dans l'objet de données. Cela doit être unique au sein d'un groupe de champs. |
| parent | FormKitNode | contextual | Par défaut, le parent est un groupe d'enrobage, une liste ou un formulaire — mais cette propriété permet une affectation explicite du nœud parent. |
| prefix-icon | String | '' | Spécifie une icône à placer dans la section prefixIcon. |
| preserve | boolean | false | Conserve la valeur de l'entrée sur un groupe parent, une liste ou un formulaire lorsque l'entrée est démontée. |
| preserve-errors | boolean | false | Par défaut, les erreurs définies sur les entrées à l'aide de setErrors sont automatiquement effacées lors de l'entrée, en définissant cette propriété sur true, l'erreur est maintenue jusqu'à ce qu'elle soit explicitement effacée. |
| sections-schema | Object | {} | Un objet de clés de section et de valeurs partielles de schéma, où chaque partie de schéma est appliquée à la section respective. |
| suffix-icon | String | '' | Spécifie une icône à placer dans la section suffixIcon. |
| type | String | text | Le type d'entrée à afficher à partir de la bibliothèque. |
| validation | String, Array | [] | Les règles de validation à appliquer à l'entrée. |
| validation-visibility | String | blur | Détermine quand afficher les règles de validation en échec d'une entrée. Les valeurs valides sont blur, dirty et live. |
| validation-label | String | {label prop} | Détermine quelle étiquette utiliser dans les messages d'erreur de validation, par défaut, elle utilise la propriété label si elle est disponible, sinon elle utilise la propriété name. |
| validation-rules | Object | {} | Règles de validation personnalisées supplémentaires à rendre disponibles pour la propriété de validation. |
| value | Any | undefined | Initialise la valeur initiale d'une entrée et/ou de ses enfants. Non réactif. Peut initialiser des groupes entiers (formulaires) et des listes.. |
Vous pouvez cibler une section spécifique d'une entrée en utilisant la "key" de cette section, ce qui vous permet de modifier les classes de cette section, le HTML (via :sections-schema) ou le contenu (via des emplacements)). En savoir plus sur les sections ici.