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 | Padrão | Descrição |
|---|---|---|---|
| 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. |
| Mostrar Universal props | |||
| config | Object | {} | Opções de configuração a serem fornecidas para o nó do input e qualquer nó descendente deste input. |
| delay | Number | 20 | Número de milissegundos para debounce do valor do input antes de despachar o commit hook. |
| dirtyBehavior | string | touched | Determina como o indicador "dirty" deste input é definido. Pode ser configurado como touched ou compare - touched (o padrão) é mais performático, mas não detectará quando o formulário corresponder novamente ao seu estado inicial. |
| errors | Array | [] | Array de strings para exibir como mensagens de erro neste campo. |
| help | String | '' | Texto para o texto de ajuda associado ao input. |
| id | String | input_{n} | O ID único do input. Fornecer um ID também permite acesso global ao nó do input. |
| ignore | Boolean | false | Impede que um input seja incluído em qualquer pai (grupo, lista, formulário etc). Útil ao usar inputs para a interface do usuário em vez de valores reais. |
| index | Number | undefined | Permite que um input seja inserido no índice fornecido, se o pai for uma lista. Se o valor do input for indefinido, ele herda o valor dessa posição de índice. Se ele tiver um valor, ele o insere nos valores da lista no índice fornecido. |
| label | String | '' | Texto para o elemento label associado ao input. |
| name | String | input_{n} | O nome do input como identificado no objeto de dados. Isso deve ser único dentro de um grupo de campos. |
| parent | FormKitNode | contextual | Por padrão, o pai é um grupo, lista ou formulário de envolvimento, mas essa prop permite a atribuição explícita do nó pai. |
| prefix-icon | String | '' | Especifica um ícone para colocar na seção prefixIcon. |
| preserve | boolean | false | Preserva o valor do input em um grupo pai, lista ou formulário quando o input é desmontado. |
| preserve-errors | boolean | false | Por padrão, os erros definidos em inputs usando setErrors são automaticamente limpos no input. Definir essa prop como true mantém o erro até que ele seja explicitamente limpo. |
| sections-schema | Object | {} | Um objeto de chaves de seção e valores parciais de esquema, em que cada esquema parcial é aplicado à seção respectiva. |
| suffix-icon | String | '' | Especifica um ícone para colocar na seção suffixIcon. |
| type | String | text | O tipo de input a ser renderizado pela biblioteca. |
| validation | String, Array | [] | As regras de validação a serem aplicadas ao input. |
| validation-visibility | String | blur | Determina quando mostrar as regras de validação com falha de um input. Os valores válidos são blur, dirty e live. |
| validation-label | String | {label prop} | Determina qual rótulo usar nas mensagens de erro de validação, por padrão, usa a propriedade label, se disponível, caso contrário, usa a propriedade name. |
| validation-rules | Object | {} | Regras de validação personalizadas adicionais para disponibilizar na propriedade de validação. |
| value | Any | undefined | Inicializa o valor do input e/ou de seus filhos. Não é reativo. Pode inicializar grupos inteiros (formulários) e listas.. |
Você pode direcionar uma seção específica de uma entrada usando a "key" dessa seção, permitindo que você modifique as classes, HTML (por meio de :sections-schema ou o conteúdo (por meio de slots) dessa seção). Saiba mais sobre as seções aqui.