電話番号入力PhoneInputExperimental
国番号の表示と電話番号の入力補助を組み合わせた入力欄です。
プレビュー
状態とバリエーション
標準表示
日本の国番号と電話番号入力を組み合わせます。
無効化
値を参照だけにする場合は disabled と disabledReason を渡します。
日本以外の番号を受ける
国番号は countryCallingCode と countryLabel、区切りの位置は formatValue で決まります。既定の 3-4-4 は日本の形なので、他の国を受けるなら3つとも差し替えます。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| 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 ContactPhoneField() {
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>
);
}