PinInput
PinInputは、ピンコードやOTP(ワンタイムパスワード)の入力を取得するために使用されるコンポーネントです。
インポート
import { PinInput, PinInputField } from "@yamada-ui/react"
PinInput: 子要素(入力フィールド)を制御するラッパーコンポーネントです。PinInputField: 入力フィールドを表示するコンポーネントです。
PinInputFieldは、省略することができます。
使い方
編集可能な例
<PinInput />
バリアントを変更する
編集可能な例
<VStack> <PinInput variant="outline" /> <PinInput variant="filled" /> <PinInput variant="flushed" /> <PinInput variant="unstyled" /> </VStack>
サイズを変更する
編集可能な例
<VStack> <PinInput size="xs" /> <PinInput size="sm" /> <PinInput size="md" /> <PinInput size="lg" /> </VStack>
デフォルトの値を設定する
デフォルトの値を設定する場合は、defaultValueに文字列または数値を設定します。
編集可能な例
<VStack> <PinInput defaultValue="1234" /> <PinInput defaultValue="123" /> </VStack>
フィールド数を変更する
フィールド数を変更する場合は、itemsに数値を設定します。
編集可能な例
<VStack> <PinInput items={3} /> <PinInput items={4} /> <PinInput items={5} /> <PinInput items={6} /> </VStack>
ボーダーのカラーを変更する
ボーダーカラーを変更するには、focusBorderColorやerrorBorderColorプロパティを使用します。
編集可能な例
<VStack> <PinInput focusBorderColor="green.500" /> <PinInput isInvalid errorBorderColor="orange.500" /> </VStack>
プレースホルダーを変更する
プレースホルダーを変更する場合は、placeholderに文字列を設定します。
編集可能な例
<PinInput placeholder="💩" />
タイプを変更する
デフォルトでは、数値のみ入力が可能です。英数字をサポートする場合は、typeにalphanumericを設定します。
編集可能な例
<PinInput type="alphanumeric" />
入力完了時の動作を設定する
入力完了時の動作を設定するには、onCompleteプロパティを使用します。
編集可能な例
const { page } = useLoading() return <PinInput onComplete={() => page.start({ duration: 5000 })} />
ワンタイムパスワードとして使用する
ワンタイムパスワード(autocomplete="one-time-code")として使用するには、otpをtrueに設定します。
編集可能な例
<PinInput otp />
入力された値をマスクする
入力された値をマスクする場合は、maskをtrueに設定します。
編集可能な例
<PinInput mask />
カスタムフィールドを使用する
カスタムフィールドを使用する場合は、PinInputFieldを使用します。
編集可能な例
<PinInput> <PinInputField /> <PinInputField /> <PinInputField /> <PinInputField /> </PinInput>
フォーカス管理を無効にする
デフォルトでは、フィールドが入力されると、自動的に次のフィールドにフォーカスは移動します。また、BackSpaceキーが入力された場合は、前のフィールドにフォーカスされます。この制御を無効にする場合は、manageFocusをfalseに設定します。
編集可能な例
<PinInput manageFocus={false} />
無効化する
無効化する場合は、isDisabledをtrueに設定します。
編集可能な例
<VStack> <PinInput isDisabled /> <PinInput> <PinInputField isDisabled /> <PinInputField isDisabled /> <PinInputField isDisabled /> <PinInputField isDisabled /> </PinInput> <FormControl isDisabled label="Please one-time password" helperMessage="Just sent you a one-time password to your e-mail address." errorMessage="one-time password is required." > <PinInput /> </FormControl> </VStack>
読み取り専用にする
読み取り専用にする場合は、isReadOnlyをtrueに設定します。
編集可能な例
<VStack> <PinInput isReadOnly /> <PinInput> <PinInputField isReadOnly /> <PinInputField isReadOnly /> <PinInputField isReadOnly /> <PinInputField isReadOnly /> </PinInput> <FormControl isReadOnly label="Please one-time password" helperMessage="Just sent you a one-time password to your e-mail address." errorMessage="one-time password is required." > <PinInput /> </FormControl> </VStack>
無効な入力にする
無効な入力にする場合は、isInvalidをtrueに設定します。
編集可能な例
<VStack> <PinInput isInvalid /> <PinInput> <PinInputField isInvalid /> <PinInputField isInvalid /> <PinInputField isInvalid /> <PinInputField isInvalid /> </PinInput> <FormControl isInvalid label="Please one-time password" helperMessage="Just sent you a one-time password to your e-mail address." errorMessage="one-time password is required." > <PinInput /> </FormControl> </VStack>
制御する
編集可能な例
const { page } = useLoading() const [value, onChange] = useState("") const onComplete = () => page.start({ duration: 5000 }) return <PinInput value={value} onChange={onChange} onComplete={onComplete} />
React Hook Formを使う
編集可能な例
type Data = { pinInput: string } const { control, handleSubmit, watch, formState: { errors }, } = useForm<Data>() const onSubmit: SubmitHandler<Data> = (data) => console.log("submit:", data) console.log("watch:", watch()) return ( <VStack as="form" onSubmit={handleSubmit(onSubmit)}> <FormControl isInvalid={!!errors.pinInput} label="Token" errorMessage={errors.pinInput ? errors.pinInput.message : undefined} > <Controller name="pinInput" control={control} rules={{ required: { value: true, message: "This is required." }, minLength: { value: 4, message: "This is required." }, }} render={({ field }) => <PinInput {...field} />} /> </FormControl> <Button type="submit" alignSelf="flex-end"> Submit </Button> </VStack> )
GitHubでこのページを編集する