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 を変更する際もラベルと可視フォーカスを保ちます。