NumberInput
NumberInputは、ユーザーからの数値入力を取得するために使用されるコンポーネントです。
FormControlを使用しない場合は、NumberInputにaria-labelまたはaria-labelledbyを設定します。
<NumberInput aria-label="Age" />
<VStack gap="sm"><Text as="h3" id="label">Age</Text><NumberInput aria-labelledby="label" /></VStack>
例えば、曜日が数値で表されており、aria-valuenowの値がユーザーフレンドリーではない場合は、aria-valuetextに"Monday"などの人間が理解可能な文字列を設定します。
const weekday = ["Sunday","Monday","Tuesday","Wednesday","Thursday","Friday","Saturday",]return (<NumberInputgetAriaValueText={(value) => weekday[Number(value)]}max={6}min={0}/>)
キーボード操作
| キー | 説明 | 状態 |
|---|---|---|
ArrowUp | stepの値に基づいて値を増加します。 | - |
ArrowDown | stepの値に基づいて値を減少します。 | - |
Home | minの値を設定します。 | - |
End | maxの値を設定します。 | - |
ARIAロールと属性
| コンポーネント | ロールと属性 | 使い方 |
|---|---|---|
NumberInput | role="group" | グループであることを示します。 |
NumberInputField 内部 | role="spinbutton" | スピンボタンであることを示します。 |
aria-valuemin | minの値を設定します。デフォルトはNumber.MIN_SAFE_INTEGERです。 | |
aria-valuemax | maxの値を設定します。デフォルトはNumber.MAX_SAFE_INTEGERです。 | |
aria-valuenow | 現在の値を設定します。 | |
aria-valuetext | 現在の値を設定します。 | |
NumberIncrementStepper 内部 | aria-label | "Increase"を設定します。 |
NumberDecrementStepper 内部 | aria-label | "Decrease"を設定します。 |
GitHubでこのページを編集する