数値入力NumberInputBeta

上下ボタン付きの数値入力です。最小値、最大値、増減単位を指定できます。

プレビュー

状態とバリエーション

最小値と最大値

直接入力と上下ボタンのどちらでも、指定した範囲から外れないようにします。

現在の値: 42

増減単位

金額やポイントなど、決まった単位で増減する値に使います。

現在の値: 125

無効化

変更できない理由はツールチップと補足文で伝えます。

現在の値: 12

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
labelReactNode-コントロール上部に表示し htmlFor で関連付けるラベルです（Input / Select / Textarea と同様）。
descriptionReactNode-コントロール下の補助テキストです。aria-describedby で関連付きます。
valuenumber-外部から渡す現在の数値です。
onValueChange(value: number) => void-値が変わった時に呼ばれます。`min` / `max` の範囲内に丸められます。
minnumber-入力できる最小値です。
maxnumber-入力できる最大値です。
stepnumber1上下ボタンで増減する単位です。
incrementLabelstring'Increment'増加ボタンの支援技術向けラベルです。
decrementLabelstring'Decrement'減少ボタンの支援技術向けラベルです。

使い方

import { FormControl, FormGroup, FormLabel, NumberInput } from "@gunjo/ui";

export function CountField() {
  const [count, setCount] = React.useState(0);

  return (
    <FormGroup className="w-full max-w-sm">
      <FormLabel htmlFor="count">件数</FormLabel>
      <FormControl>
        <NumberInput
          id="count"
          value={count}
          onValueChange={setCount}
          min={0}
          max={100}
          step={5}
          incrementLabel="件数を増やす"
          decrementLabel="件数を減らす"
        />
      </FormControl>
    </FormGroup>
  );
}

使用コンポーネント

NumberInputInputButtonFormGroup

関連コンポーネント

RangeSliderSliderForm