Leave Yamada UI a star

Star
Yamada UIYamada UIv1.7.2

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 isInvalid 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 isDisabled to true.

Editable example

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

Make Read-Only

To make read-only, set isReadOnly to true.

Editable example

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

Make Input Invalid

To make the input invalid, set isInvalid to true.

Editable example

<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>
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
      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>
)
Copied!

Edit this page on GitHub

PreviousPasswordInputNextPhoneInput