NumberInput

精确数字：右对齐的等宽数字、单位、悬停时显示步进按钮，值为十进制字符串。

查看源码
USD
value = "1250.00"
import { NumberInput } from "@logicplanes/kaeso-ui";

属性

  • align
    "start" | "end" = end

    值的文本对齐方式；数字靠右对齐并使用等宽数字。

  • defaultValue
    string

    首次渲染时的数字，以文本形式。

  • description
    ReactNode

    标签下方的一句帮助文字。

  • hideStepper
    boolean

    隐藏步进圆形按钮。

  • invalid
    boolean

    显示为无效；请搭配说明如何修正的消息。

  • label
    ReactNode

    可见标签。

  • layout
    "horizontal" | "vertical"

    标签位于控件上方（vertical）或旁边（horizontal）。

  • leadingIcon
    IconSvgElement

    文字前的图标。

  • max
    string

    允许的最大数字。

  • min
    string

    允许的最小数字。

  • onValueChange
    ((value: string) => void)

    调用时传入以文本形式键入的数字。

  • optional
    boolean

    在标签后加上“可选”，用于大多数字段为必填的表单。

  • prefix
    ReactNode

    值前的文字：“https://”。

  • size
    "md" | "sm" | "lg" | "xl"

    输入框的高度。

  • step
    string = 1

    步进按钮和方向键的步长，为十进制字符串。

  • suffix
    ReactNode

    值后的文字：“USD”“/ 分钟”。

  • trailing
    ReactNode

    任意后置元素（按钮、Kbd）。

  • unit
    string

    值后的单位：“USD”“tokens”“/ 分钟”。

  • value
    string

    以十进制字符串表示的精确值（“12.50”）。绝不使用浮点数。