Number Input

fandhe-frontend-headless-ui の number_input mod が提供する数値入力の unstyled 部品です。Root / Label / Control / Input / IncrementTrigger / DecrementTrigger の 6 anatomy パーツで構成され、min/max/step に沿った値の正規化・境界到達時のトリガー無効化（data-disabled）を担います。連続量のため離散的な data-state は持ちません。

/themes/ 側の Input（Chakra ライクな variant/size を持つスタイル層）と異なり、CSS を一切持たず、増減操作の実 DOM 配線もクライアントランタイム側の責務です。

スタイル済みの表示例は Number Input を参照してください。

関連 API: fandhe-frontend-headless-ui API

Demo

枠線・余白は docs サイト側のデモ枠であり、fandhe-frontend-headless-ui 自体はスタイルを持ちません。

Quantity

Features

Root / Label / Control / Input / IncrementTrigger / DecrementTrigger の 6 anatomy パーツを提供する（`data-state` は持たない。連続量のため境界到達の 2 値のみを各トリガーの `disabled`/`data-disabled` で表現する）。
`min`/`max`/`step`/`value` を fail-closed に正規化し、`step` の小数桁数へ丸めてから `[min, max]` へ clamp する（浮動小数点ドリフト対策）。
`input` は `type="text"` + `role="spinbutton"`（WAI-ARIA spinbutton パターン）で意味論を担い、`aria-valuemin`/`aria-valuemax` を常時、`aria-valuenow` は値が確定しているときのみ出力する。
dispatch（`"increment"`/`"decrement"`/`"set"`/`"clear"`）と hydration（`data-hydrate-value`/`-min`/`-max`/`-step`）は fail-closed（パース不能・非有限値は `HydrateError` で拒否）。

Anatomy

root
  label
  control
    decrement-trigger
    input
    increment-trigger

API Reference

Arguments

Name	Type	Default	Description
root/label/control(disabled)	bool		`data-disabled` を反映する（`label`/`control` は同名引数を同じ意味で持つ）。
root/label/control(invalid)	bool		`data-invalid` を反映する。
label(input_id)	Option<&str>		`Some` のとき `input` の id と対で `for` 属性を出力する。
input(name)	&str		ネイティブ `name` 属性。
input(id)	Option<&str>		`Some` のとき `id` 属性を出力する（`label(input_id)` の関連付け先）。
input(value)	Option<&str>		現在値の整形済み文字列。`None`（未入力）なら `aria-valuenow`/`value` 属性ごと出力しない。
input(min)	&str		`aria-valuemin` として常時出力する整形済み文字列。
input(max)	&str		`aria-valuemax` として常時出力する整形済み文字列。
input(flags)	NumberInputFlags	NumberInputFlags::default()	`disabled`/`readonly`/`required`/`invalid` の 4 bool をまとめた薄い構造体（clippy `too_many_arguments` 回避）。
increment_trigger/decrement_trigger(input_id)	Option<&str>		`Some` のとき `aria-controls` で `input` と関連付ける。
increment_trigger/decrement_trigger(disabled)	bool		境界到達（`can_increment`/`can_decrement` が `false`）と全体無効化を合成した最終値。`true` でネイティブ `disabled` + `data-disabled` を出力する。

Examples

Disabled

全体を無効化した NumberInput。両トリガーがネイティブ `disabled` を持ち、`input` にも `data-disabled` が付く。

Seats

Accessibility

WAI-ARIA

Attribute	Description
role="spinbutton" (input)	WAI-ARIA spinbutton パターン。ネイティブ `<input type="number">` ではなく `type="text"` を使うため、上下キーによる native な増減は成立しない（増減はクライアントランタイムの配線責務、モジュール doc「out-of-scope」参照）。
aria-valuemin / aria-valuemax (input)	正規化済みの `min`/`max` を常時出力する。
aria-valuenow (input)	現在値が確定している（`value` が `Some`）ときのみ出力する。