Neumorphism UI
表单与选择@neumorphism-ui/number-field

Number Field

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

@neumorphism-ui/number-field
Registry JSON

预览

安装

安装: number-fieldnpx shadcn@latest add @neumorphism-ui/number-field

CLI 会依次处理 npm 依赖、base token、utils 和组件源码。

首次使用此 Registry？请先完成 namespace 配置 。

用法

Import

Number Field import 代码
"use client";

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

Example

Number Field 用法代码
export default function Example() {
  const id = React.useId();
  return (<NumberField id={id} defaultValue={3} min={1} max={8}><label htmlFor={id} className="text-sm font-semibold">{"座位数"}</label><NumberFieldGroup><NumberFieldDecrement aria-label={"减少座位"} /><NumberFieldInput /><NumberFieldIncrement aria-label={"增加座位"} /></NumberFieldGroup></NumberField>);
}

API 参考

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

无障碍

  • 01

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

  • 02

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