郵便番号入力PostalCodeInputExperimental

郵便番号の入力と 3桁-4桁の整形を扱う入力欄です。

プレビュー

状態とバリエーション

標準表示

3桁-4桁の郵便番号として入力を整形します。

〒

住所補完は上位で接続し、入力欄は値の整形に責務を絞ります。

接頭辞なし

表組みなど、文脈上 prefix が不要な場合は空にできます。

プロパティ

表は横にスクロールできます
プロパティ型初期値説明
value / defaultValue / onValueChangestring / (value) => void-郵便番号の値を制御します。
prefixReactNode"〒"入力欄の先頭に表示する補助記号です。
formatValue(value: string) => string-入力値の整形関数です。既定では 3桁-4桁に整形します。
disabledReasonReactNode-無効化理由としてツールチップに表示します。

使い方

import * as React from "react";
import { FormControl, FormDescription, FormGroup, FormLabel, PostalCodeInput } from "@gunjo/ui";

export function PostalCodeInputDemo() {
  const [value, setValue] = React.useState("150-0001");

  return (
    <FormGroup className="w-full max-w-sm">
      <FormLabel htmlFor="postal-code">郵便番号</FormLabel>
      <FormControl>
        <PostalCodeInput id="postal-code" value={value} onValueChange={setValue} />
      </FormControl>
      <FormDescription>住所補完は上位で接続します。</FormDescription>
    </FormGroup>
  );
}

使用コンポーネント

PostalCodeInputInputForm

関連コンポーネント

PhoneInputInput