Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.5

PinInput

PinInput is a component used to capture pin codes or OTP (One-Time Password) inputs.

Source@yamada-ui/pin-input

Import

import { PinInput, PinInputField } from "@yamada-ui/react"
Copied!
  • PinInput: A wrapper component that controls the child elements (input fields).
  • PinInputField: A component that displays the input field.

Usage

Editable example

<PinInput />
Copied!

Change Variant

Editable example

<VStack>
  <PinInput variant="outline" />
  <PinInput variant="filled" />
  <PinInput variant="flushed" />
  <PinInput variant="unstyled" />
</VStack>
Copied!

Change Size

Editable example

<VStack>
  <PinInput size="xs" />
  <PinInput size="sm" />
  <PinInput size="md" />
  <PinInput size="lg" />
</VStack>
Copied!

Set Default Value

To set a default value, set a string or number to defaultValue.

Editable example

<VStack>
  <PinInput defaultValue="1234" />
  <PinInput defaultValue="123" />
</VStack>
Copied!

Change Number of Fields

To change the number of fields, set a number to items.

Editable example

<VStack>
  <PinInput items={3} />
  <PinInput items={4} />
  <PinInput items={5} />
  <PinInput items={6} />
</VStack>
Copied!

Change Border Color

To change the border color, use the focusBorderColor or errorBorderColor properties.

Editable example

<VStack>
  <PinInput focusBorderColor="green.500" />
  <PinInput invalid errorBorderColor="orange.500" />
</VStack>
Copied!

Change Placeholder

To change the placeholder, set a string to placeholder.

Editable example

<PinInput placeholder="💩" />
Copied!

Change Type

By default, only numeric input is allowed. To support alphanumeric, set type to alphanumeric.

Editable example

<PinInput type="alphanumeric" />
Copied!

Set Action on Completion

To set the action on completion, use the onComplete property.

Editable example

const { page } = useLoading()

return <PinInput onComplete={() => page.start({ duration: 5000 })} />
Copied!

Use as One-Time Password

To use as a one-time password (autocomplete="one-time-code"), set otp to true.

Editable example

<PinInput otp />
Copied!

Mask Entered Value

To mask the entered value, set mask to true.

Editable example

<PinInput mask />
Copied!

Use Custom Field

To use a custom field, use PinInputField.

Editable example

<PinInput>
  <PinInputField />
  <PinInputField />
  <PinInputField />
  <PinInputField />
</PinInput>
Copied!

Disable Focus Management

By default, when a field is entered, the focus automatically moves to the next field. Also, when the BackSpace key is pressed, the focus moves to the previous field. To disable this control, set manageFocus to false.

Editable example

<PinInput manageFocus={false} />
Copied!

Disable

To disable, set disabled to true.

Editable example

<VStack>
  <PinInput disabled />

  <PinInput>
    <PinInputField disabled />
    <PinInputField disabled />
    <PinInputField disabled />
    <PinInputField disabled />
  </PinInput>

  <FormControl
    disabled
    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>
Copied!

Make Read-Only

To make read-only, set readOnly to true.

Editable example

<VStack>
  <PinInput readOnly />
  <PinInput>
    <PinInputField readOnly />
    <PinInputField readOnly />
    <PinInputField readOnly />
    <PinInputField readOnly />
  </PinInput>
  <FormControl
    readOnly
    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>
Copied!

Make Input Invalid

To make the input invalid, set invalid to true.

Editable example

<VStack>
  <PinInput invalid />
  <PinInput>
    <PinInputField invalid />
    <PinInputField invalid />
    <PinInputField invalid />
    <PinInputField invalid />
  </PinInput>
  <FormControl
    invalid
    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>
Copied!

Control

Editable example

const { page } = useLoading()
const [value, onChange] = useState("")

const onComplete = () => page.start({ duration: 5000 })

return <PinInput value={value} onChange={onChange} onComplete={onComplete} />
Copied!

Use React Hook Form

Editable example

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
      invalid={!!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>
)
Copied!

Edit this page on GitHub

PreviousPasswordInputNextPhoneInput