Neumorphism UI

Number Field

用于直接输入数字，或通过增减按钮调整数值。

预览

工作区座位数

从 3 个座位开始，在 1 至 8 个的范围内调整。

正在加载预览。

安装

首次使用此 Registry？请先完成 基础配置与共享样式安装 。

npx shadcn@latest add @neumorphism-ui/number-field

先安装一次共享 base，然后使用 CLI 添加组件及其依赖。

Registry JSON

用法

为 NumberField 提供标签，将 NumberFieldInput 与增减控件分组。设置合理范围，并为两个调整按钮命名。

"use client";

import { useId } from "react";
import { NumberField, NumberFieldDecrement, NumberFieldGroup, NumberFieldIncrement, NumberFieldInput } from "@/components/ui/number-field";

export default function Example() {
  const id = useId();
  return (
    <NumberField id={id} defaultValue={1} min={1} max={10}>
      <label htmlFor={id}>Seats</label>
      <NumberFieldGroup>
        <NumberFieldDecrement aria-label="Decrease seats" />
        <NumberFieldInput />
        <NumberFieldIncrement aria-label="Increase seats" />
      </NumberFieldGroup>
    </NumberField>
  );
}

API 参考

支持范围、步长和本地化格式的数字输入。 为增加和减少按钮分别命名。检查边界值以及直接输入。

组件属性类型默认值说明
NumberFieldmin / maxnumber—设置最小值与最大值。
NumberFieldstepnumber—按钮和键盘操作的增减步长。
NumberFieldlocale / formatstring | Intl.NumberFormatOptions—配置本地化数字格式。

无障碍

  • 01

    为增加和减少按钮分别命名。检查边界值以及直接输入。

  • 02

    修改 render 或 className 时保留标签关联和可见焦点。