電話番号入力PhoneInputExperimental
国番号の表示と電話番号の入力補助を組み合わせた入力欄です。
プレビュー
状態とバリエーション
標準表示
日本の国番号と電話番号入力を組み合わせます。
無効化
値を参照だけにする場合は disabled と disabledReason を渡します。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| value / defaultValue / onValueChange | string / (value) => void | - | 電話番号の値を制御します。 |
| countryCallingCode / countryLabel | string / ReactNode | "+81" / "Japan" | 国番号の表示と支援技術向けラベルです。 |
| formatValue | (value: string) => string | - | 入力値の整形関数です。国際番号などはここで差し替えます。 |
| disabledReason | ReactNode | - | 無効化理由としてツールチップに表示します。 |
使い方
import * as React from "react";
import { FormControl, FormDescription, FormGroup, FormLabel, PhoneInput } from "@gunjo/ui";
export function PhoneInputDemo() {
const [value, setValue] = React.useState("090-1234-5678");
return (
<FormGroup className="w-full max-w-sm">
<FormLabel htmlFor="phone">電話番号</FormLabel>
<FormControl>
<PhoneInput id="phone" value={value} onValueChange={setValue} />
</FormControl>
<FormDescription>国番号の表示と電話番号の入力補助を組み合わせます。</FormDescription>
</FormGroup>
);
}