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

专业安装快速启动 :rocket:

Unit Input

The unit input allows for restricted input of values based on the provided unit (distance, weight, temperature, etc.) and locale.

加载实时示例

Props

Unit

The unit prop is the type of unit you want to display. A full list of allowed unit types are listed below:

  • acre
  • bit
  • byte
  • celsius
  • centimeter
  • day
  • degree
  • fahrenheit
  • fluid-ounce
  • foot
  • gallon
  • gigabit
  • gigabyte
  • gram
  • hectare
  • hour
  • inch
  • kilobit
  • kilobyte
  • kilogram
  • kilometer
  • liter
  • megabit
  • megabyte
  • meter
  • microsecond
  • mile
  • mile-scandinavian
  • milliliter
  • millimeter
  • millisecond
  • minute
  • month
  • nanosecond
  • ounce
  • percent
  • petabyte
  • pound
  • second
  • stone
  • terabit
  • terabyte
  • week
  • yard
  • year

Unit display

The display length can be modified by the unitDisplay property. Accepted values are short, narrow, and long.

加载实时示例

Locale

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.

加载实时示例

Decimals

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".

加载实时示例

Minimum and Maximum Values

Similar to a number input, you can set a min and max value.

加载实时示例

Step

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.

加载实时示例

Value Formatting

The value of the input itself defaults to a number but can be formatted as a string to include information about the unit itself.

加载实时示例

Value unit

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.

加载实时示例

Unitless

The unit prop is optional, allowing for unitless values.

加载实时示例
Mixed unit types

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).

Props & Attributes

PropType默认描述
unitstring | undefinedSet the specified unit to use for this input. If undefined, will allow for unitless values.
displayLocalestringen-USSet the desired display locale to use for this input
decimalsboolean|numbernullChoose to either completely disallow decimals or override the maximum number of decimals for the input
minDecimalsnumbernullChoose to show a minimum number of decimals should your input require this
minnumbernullMinimum numeric value allowed. If zero or above, negatives will not be allowed
maxnumbernullMaximum numeric value allowed for this input
stepnumber1When using the up/down keys, how much to modify the current value.
valueDecimalsstring | numberundefinedDetermines the allowed number of decimals for the valueUnit.
valueFormatstringnumberChoose between number and string whether you want a numeric value or a parsed string value
valueUnitstringundefinedUsed to convert the user-inputted value from one unit to another
unitDisplaystring ('narrow' | 'short' | 'long')shortDetermines the length of the how the unit is represented.
显示 通用 props
configObject{}提供给 input 的节点和此输入的任何后代节点的配置选项。
delayNumber20在调度 commit hook 前,输入值的去抖动毫秒数。
dirtyBehaviorstringtouched确定此输入的“dirty”标志设置方式。可以设置为 touchedcompare — 默认为 touched,性能更好,但无法检测表单是否再次匹配其初始状态。
errorsArray[]要在此字段上显示的错误消息的字符串数组。
helpString''帮助文本与输入关联的文本。
idStringinput_{n}输入的唯一标识符。提供一个 id 还可以全局访问输入的节点。
ignoreBooleanfalse防止将输入包含在任何父级(组、列表、表单等)中。在仅用于 UI 而不是实际值的情况下非常有用。
indexNumberundefined如果父级是列表,允许在给定索引处插入输入。如果输入的值未定义,它将继承该索引位置的值。如果它有一个值,它将在给定索引处将其插入到列表的值中。
labelString''与输入关联的 label 元素的文本。
nameStringinput_{n}输入的名称,在数据对象中唯一标识。在一组字段中应该是唯一的。
parentFormKitNodecontextual默认情况下,父级是包装组、列表或表单,但此属性允许显式分配父级节点。
prefix-iconString''指定放置在 prefixIcon 部分的 图标
preservebooleanfalse在输入卸载时,在父组、列表或表单上保留输入的值。
preserve-errorsbooleanfalse默认情况下,使用 setErrors 在输入上设置的错误会在输入时自动清除,将此属性设置为 true 可以保留错误,直到明确清除为止。
sections-schemaObject{}一个包含部分键和模式部分值的对象,其中每个模式部分应用于相应的部分。
suffix-iconString''指定放置在 suffixIcon 部分的 图标
typeStringtext要从库中渲染的输入类型。
validationString, Array[]要应用于输入的 验证 规则。
validation-visibilityStringblur确定何时显示输入的验证失败规则。有效值为 blurdirtylive
validation-labelString{label prop}确定在验证错误消息中使用的标签,默认情况下,如果可用,则使用 label 属性,否则使用 name 属性。
validation-rulesObject{}附加的自定义验证规则,可用于验证 prop。
valueAnyundefined为输入和/或其子元素提供初始值。不是响应式的。可以种子 整个组(表单)和列表。

Sections

您可以通过使用该部分的"key"来定位输入的特定部分,从而可以修改该部分的类、HTML(通过:sections-schema)或内容(通过插槽))。了解更多关于部分的信息,请点击这里

Unit input diagram

Unit Input
100 mi
Help text goes here
Any messages would appear here