PinInput
PinInputは、ピンコードやOTP(ワンタイムパスワード)の入力を取得するために使用されるコンポーネントです。
<PinInput.Root />
使い方
import { PinInput } from "@yamada-ui/react"
import { PinInput } from "@/components/ui"
import { PinInput } from "@workspaces/ui"
<PinInput.Root />
バリアントを変更する
<VStack>
<For each={["outline", "filled", "flushed"]}>
{(variant) => <PinInput.Root key={variant} variant={variant} />}
</For>
</VStack>
サイズを変更する
<VStack>
<For each={["xs", "sm", "md", "lg", "xl"]}>
{(size) => <PinInput.Root key={size} size={size} />}
</For>
</VStack>
カラースキームを変更する
<VStack>
<For each={["green", "orange"]}>
{(colorScheme) => (
<PinInput.Root key={colorScheme} colorScheme={colorScheme} />
)}
</For>
</VStack>
デフォルトの値を設定する
デフォルトの値を設定する場合は、defaultValueに文字列を設定します。
<VStack>
<For each={["1234", "123"]}>
{(defaultValue) => (
<PinInput.Root key={defaultValue} defaultValue={defaultValue} />
)}
</For>
</VStack>
プレースホルダーを変更する
プレースホルダーを変更する場合は、placeholderに文字列を設定します。
<PinInput.Root placeholder="💩" />
フィールド数を変更する
フィールド数を変更する場合は、itemsに数値を設定します。
<VStack>
<For each={[3, 4, 5, 6]}>
{(items) => <PinInput.Root key={items} items={items} />}
</For>
</VStack>
タイプを変更する
デフォルトでは、数値のみ入力が可能です。英数字をサポートする場合は、typeにalphanumericを設定します。
<PinInput.Root type="alphanumeric" />
ワンタイムパスワード
ワンタイムパスワード(autocomplete="one-time-code")を有効にするには、otpをtrueに設定します。
<PinInput.Root otp />
入力された値をマスクする
入力された値をマスクする場合は、maskをtrueに設定します。
<PinInput.Root mask />
無効にする
無効にする場合は、disabledをtrueに設定します。
<PinInput.Root>
<For each={[0, 1, 2, 3]}>
{(index) => <PinInput.Field key={index} index={index} disabled />}
</For>
</PinInput.Root>
読み取り専用にする
読み取り専用にする場合は、readOnlyをtrueに設定します。
<PinInput.Root>
<For each={[0, 1, 2, 3]}>
{(index) => <PinInput.Field key={index} index={index} readOnly />}
</For>
</PinInput.Root>
無効な入力にする
無効な入力にする場合は、invalidをtrueに設定します。
<PinInput.Root>
<For each={[0, 1, 2, 3]}>
{(index) => <PinInput.Field key={index} index={index} invalid />}
</For>
</PinInput.Root>
ボーダーの色を変更する
ボーダーの色を変更する場合は、focusBorderColorまたはerrorBorderColorに値を設定します。
<VStack>
<PinInput.Root focusBorderColor="green.500" />
<PinInput.Root errorBorderColor="orange.500" invalid />
</VStack>
完了のイベントをハンドルする
完了のイベントをハンドルする場合は、onCompleteを使用します。
const { page } = useLoading()
return <PinInput.Root onComplete={() => page.start({ duration: 5000 })} />
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。フォーカス管理を無効にする
デフォルトでは、フィールドが入力されると、自動的に次のフィールドにフォーカスは移動します。また、BackSpaceキーが入力された場合は、前のフィールドにフォーカスされます。この制御を無効にする場合は、manageFocusをfalseに設定します。
<PinInput.Root manageFocus={false} />
フィールドをカスタマイズする
<PinInput.Root>
<For each={[0, 1, 2, 3]}>
{(index) => (
<PinInput.Field
key={index}
index={index}
_placeholder={{ color: "blue.500" }}
/>
)}
</For>
</PinInput.Root>
制御する
const { page } = useLoading()
const [value, onChange] = useState("")
const onComplete = () => page.start({ duration: 5000 })
return (
<PinInput.Root value={value} onChange={onChange} onComplete={onComplete} />
)
こちらのコードを使用する場合は、
"use client"をファイルの上部に追加する必要があります。Props
アクセシビリティ
現在、v2の移行に伴い、このセクションは更新中です。