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