只允许输入数字. 原生type="number"的input存在一些局限性. 它接受的输入可能不一定是合法的数字. 如0000e123
NumberInput组件解决了这些问题. 它只接受常规的数字表示法, 不接受科学计数法等其它表示法
NumberInput组件基于TextInput构建, 因此继承了TextInput的属性
默认情况下可以输入任意合法的数字. 包括负数, 任意小数, 整数等.
这对于输入银行卡号等场景尤其有用.
tip: 此时移动端会显示系统数字键盘.
这对于输入付款金额等场景尤其有用.
tip: 此时移动端会显示带小数点的系统数字键盘.
prefix和suffix属性可以设置自动显示的前缀和后缀.
decimalScale属性用于设置最大的小数位数.
下面的例子最大只能有两位小数.
isAllowed属性是一个方法, 用于自定义输入的验证逻辑. 它接受一个values对象参数. 如果函数的返回值为false, onChange方法不会触发, 并且输入值不会改变.
values参数的类型是NumberFormatValues, 它的类型定义:
interface NumberFormatValues {
// 解析后的数值, 如果是不可转换为数字会是undefined
floatValue: number | undefined;
// 格式化后的值
formattedValue: string;
// 用户输入的值
value: string;
}thousandsGroupStyle属性可以设置为自动分位显示, 支持的分位模式:
以下的例子使用国际通用的千分位显示和中国的万分位显示
tip: 如果是一个较小的范围, 可以考虑使用
Slider组件替代.
min和max属性控制着输入范围. step属性控制键盘上/下箭头快捷键的增加/减少的步长
clampBehavior属性控制着当输入超出范围时的夹紧行为. 取值:
"strict" 严格模式, 意味着不可能输入超出范围的值.
注意: 在"strict"模式下, min必须小于等于0, 否则会导致问题.
"blur" 会在输入框失去焦点时夹紧, 这是默认模式. 此模式下对min没有特殊要求.
"none" 不执行夹紧行为, 只有通过键盘快捷键增加/减少才会被限制在范围内.
| 属性名 | 类型 | 是否必须 | 默认值 | 说明 |
|---|---|---|---|---|
| allowDecimal | boolean | undefined | no | true | Determines whether decimal values are allowed |
| allowNegative | boolean | undefined | no | true | Determines whether negative values are allowed |
| clampBehavior | "none" | "strict" | "blur-sm" | undefined | no | "blur-sm" | Controls how value is clamped <code>strict</code> – user is not allowed to enter values that are not in <code>[min, max]</code> range, <code>blur-sm</code> – user is allowed to enter any values, but the value is clamped when the input loses focus (default behavior), <code>none</code> – lifts all restrictions, <code>[min, max]</code> range is applied only for controls and up/down keys |
| decimalScale | number | undefined | no | Limits the number of digits that can be entered after the decimal point | |
| defaultValue | string | number | undefined | no | Uncontrolled component default value | |
| description | React.ReactNode | no | Contents of <code>Input.Description</code> component. If not set, description is not rendered. | |
| descriptionProps | Record<string, any> | undefined | no | Props passed down to the <code>Input.Description</code> component | |
| disabled | boolean | undefined | no | Sets <code>disabled</code> attribute on the <code>input</code> element | |
| error | React.ReactNode | no | Determines whether the input should have error styles and <code>aria-invalid</code> attribute | |
| errorProps | Record<string, any> | undefined | no | Props passed down to the <code>Input.Error</code> component | |
| id | string | undefined | no | Static id used as base to generate <code>aria-</code> attributes, by default generates random id | |
| inputContainer | ((children: ReactNode) => ReactNode) | undefined | no | (children) => children | Input container component |
| inputWrapperOrder | ("input" | "label" | "error" | "description")[] | undefined | no | ['label', 'description', 'input', 'error'] | Controls order of the elements |
| isAllowed | ((values: NumberFormatValues) => boolean) | undefined | no | A function to validate the input value. If this function returns <code>false</code>, the <code>onChange</code> will not be called and the input value will not change. | |
| label | React.ReactNode | no | Contents of <code>Input.Label</code> component. If not set, label is not rendered. | |
| labelElement | "div" | "label" | undefined | no | "label" | <code>Input.Label</code> root element |
| labelProps | Record<string, any> | undefined | no | Props passed down to the <code>Input.Label</code> component | |
| leftSection | React.ReactNode | no | Content section rendered on the left side of the input | |
| leftSectionPointerEvents | PointerEvents | undefined | no | "none" | Sets <code>pointer-events</code> styles on the <code>rightSection</code> element |
| leftSectionWidth | Width<string | number> | undefined | no | Left section width, used to set <code>width</code> of the section and input <code>padding-left</code>, by default equals to the input height | |
| max | number | undefined | no | Maximum possible value | |
| min | number | undefined | no | Minimum possible value | |
| multiline | boolean | undefined | no | false | Determines whether the input can have multiple lines, for example when <code>component="textarea"</code> |
| onChange | ((value: string | number) => void) | undefined | no | ||
| onValueChange | OnValueChange | undefined | no | Called when value changes with <code>react-number-format</code> payload | |
| pointer | boolean | undefined | no | false | Determines whether the input should have <code>cursor: pointer</code> style |
| prefix | string | undefined | no | Prefix added before the input value | |
| radius | string | undefined | no | "md" | Key of <code>theme.radius</code> or any valid CSS value to set <code>border-radius</code>, numbers are converted to rem |
| required | boolean | undefined | no | Sets <code>required</code> attribute on the <code>input</code> element | |
| rightSection | React.ReactNode | no | Content section rendered on the right side of the input | |
| rightSectionPointerEvents | PointerEvents | undefined | no | "none" | Sets <code>pointer-events</code> styles on the <code>rightSection</code> element |
| rightSectionWidth | Width<string | number> | undefined | no | Right section width, used to set <code>width</code> of the section and input <code>padding-right</code>, by default equals to the input height | |
| slots | { left?: string | undefined; input?: string | undefined; right?: string | undefined; } | undefined | no | ||
| step | number | undefined | no | 1 | Number by which value will be incremented/decremented with up/down controls and keyboard arrows |
| suffix | string | undefined | no | Suffix added after the input value | |
| thousandsGroupStyle | "thousand" | "lakh" | "wan" | undefined | no | Defines the thousand grouping style. | |
| value | string | number | undefined | no | Controlled component value | |
| variant | "outline" | "default" | "ghost" | undefined | no | "outline" | input variant |
| withAria | boolean | undefined | no | true | Determines whether <code>aria-</code> and other accessibility attributes should be added to the input |
| withAsterisk | boolean | undefined | no | false | Determines whether the required asterisk should be displayed. Overrides <code>required</code> prop. Does not add required attribute to the input. |
| withErrorStyles | boolean | undefined | no | true | Determines whether the input should have red border and red text color when the <code>error</code> prop is set |
| wrapperProps | Record<string, any> | undefined | no | Props passed down to the root element of the <code>Input</code> component |