PIN码输入

用于捕获用户的PIN码或一次性密码（OTP）

import { PinInput } from "@chakra-ui/react"

const Demo = () => {
  return (
    <PinInput.Root>
      <PinInput.HiddenInput />
      <PinInput.Control>
        <PinInput.Input index={0} />
        <PinInput.Input index={1} />
        <PinInput.Input index={2} />
        <PinInput.Input index={3} />
      </PinInput.Control>
    </PinInput.Root>
  )
}

用法

import { PinInput } from "@chakra-ui/react"

<PinInput.Root>
  <PinInput.HiddenInput />
  <PinInput.Control>
    <PinInput.Input />
  </PinInput.Control>
</PinInput.Root>

信息

如果您更喜欢封闭式组件组合，请查看以下代码片段。

示例

尺寸

将size属性传递给PinInput.Root组件，以更改PIN码输入组件的尺寸

import { For, PinInput, Stack } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Stack gap="4">
      <For each={["sm", "md", "lg"]}>
        {(size) => (
          <PinInput.Root key={size} size={size}>
            <PinInput.HiddenInput />
            <PinInput.Control>
              <PinInput.Input index={0} />
              <PinInput.Input index={1} />
              <PinInput.Input index={2} />
              <PinInput.Input index={3} />
            </PinInput.Control>
          </PinInput.Root>
        )}
      </For>
    </Stack>
  )
}

一次性代码

将otp属性传递给PinInput.Root组件，使PIN码输入组件表现得像一个一次性代码输入框。这有助于改善输入OTP码时的用户体验

import { PinInput } from "@chakra-ui/react"

const Demo = () => {
  return (
    <PinInput.Root otp>
      <PinInput.HiddenInput />
      <PinInput.Control>
        <PinInput.Input index={0} />
        <PinInput.Input index={1} />
        <PinInput.Input index={2} />
        <PinInput.Input index={3} />
      </PinInput.Control>
    </PinInput.Root>
  )
}

遮罩

将mask属性传递给PinInput.Root组件，以隐藏输入的PIN码

import { PinInput } from "@chakra-ui/react"

const Demo = () => {
  return (
    <PinInput.Root mask>
      <PinInput.HiddenInput />
      <PinInput.Control>
        <PinInput.Input index={0} />
        <PinInput.Input index={1} />
        <PinInput.Input index={2} />
        <PinInput.Input index={3} />
      </PinInput.Control>
    </PinInput.Root>
  )
}

占位符

将placeholder属性传递给PinInput.Root组件，为PIN码输入框添加占位符

import { PinInput } from "@chakra-ui/react"

const Demo = () => {
  return (
    <PinInput.Root placeholder="🥳">
      <PinInput.HiddenInput />
      <PinInput.Control>
        <PinInput.Input index={0} />
        <PinInput.Input index={1} />
        <PinInput.Input index={2} />
        <PinInput.Input index={3} />
      </PinInput.Control>
    </PinInput.Root>
  )
}

字段

这是一个如何组合Field和PinInput组件的示例

输入一次性密码

import { Field, PinInput } from "@chakra-ui/react"

const Demo = () => {
  return (
    <Field.Root>
      <Field.Label>Enter otp</Field.Label>
      <PinInput.Root>
        <PinInput.HiddenInput />
        <PinInput.Control>
          <PinInput.Input index={0} />
          <PinInput.Input index={1} />
          <PinInput.Input index={2} />
          <PinInput.Input index={3} />
        </PinInput.Control>
      </PinInput.Root>
    </Field.Root>
  )
}

Hook表单

这是一个如何使用react-hook-form组合Field和PinInput组件的示例

"use client"

import { Button, Field, PinInput, Stack } from "@chakra-ui/react"
import { zodResolver } from "@hookform/resolvers/zod"
import { Controller, useForm } from "react-hook-form"
import { z } from "zod"

const formSchema = z.object({
  pin: z
    .array(z.string().min(1), { required_error: "Pin is required" })
    .length(4, { message: "Pin must be 4 digits long" }),
})

type FormValues = z.infer<typeof formSchema>

const Demo = () => {
  const { handleSubmit, control, formState } = useForm<FormValues>({
    resolver: zodResolver(formSchema),
  })

  const onSubmit = handleSubmit((data) => console.log(data))

  return (
    <form onSubmit={onSubmit}>
      <Stack gap="4" align="flex-start" maxW="sm">
        <Field.Root invalid={!!formState.errors.pin}>
          <Controller
            control={control}
            name="pin"
            render={({ field }) => (
              <PinInput.Root
                value={field.value}
                onValueChange={(e) => field.onChange(e.value)}
              >
                <PinInput.HiddenInput />
                <PinInput.Control>
                  <PinInput.Input index={0} />
                  <PinInput.Input index={1} />
                  <PinInput.Input index={2} />
                  <PinInput.Input index={3} />
                </PinInput.Control>
              </PinInput.Root>
            )}
          />
          <Field.ErrorText>{formState.errors.pin?.message}</Field.ErrorText>
        </Field.Root>
        <Button type="submit">Submit</Button>
      </Stack>
    </form>
  )
}

受控

将value和onValueChange属性传递给PinInput.Root组件，以控制PIN码输入的值

"use client"

import { PinInput } from "@chakra-ui/react"
import { useState } from "react"

const Demo = () => {
  const [value, setValue] = useState(["", "", "", ""])
  return (
    <PinInput.Root value={value} onValueChange={(e) => setValue(e.value)}>
      <PinInput.HiddenInput />
      <PinInput.Control>
        <PinInput.Input index={0} />
        <PinInput.Input index={1} />
        <PinInput.Input index={2} />
        <PinInput.Input index={3} />
      </PinInput.Control>
    </PinInput.Root>
  )
}

状态管理

另一种控制PIN码输入的方式是使用RootProvider组件和usePinInput状态管理 Hook。

通过这种方式，您可以从组件外部访问PIN码输入的 상태 和方法。

"use client"

import {
  Button,
  ButtonGroup,
  PinInput,
  Stack,
  usePinInput,
} from "@chakra-ui/react"

const Demo = () => {
  const store = usePinInput()
  return (
    <Stack align="flex-start">
      <PinInput.RootProvider value={store}>
        <PinInput.Control>
          <PinInput.Input index={0} />
          <PinInput.Input index={1} />
          <PinInput.Input index={2} />
          <PinInput.Input index={3} />
        </PinInput.Control>
      </PinInput.RootProvider>

      <ButtonGroup variant="outline" size="sm">
        <Button onClick={() => store.setValue(["1", "2", "3", "4"])}>
          Set value
        </Button>
        <Button onClick={() => store.clearValue()}>Clear value</Button>
      </ButtonGroup>
    </Stack>
  )
}

附加

将attached属性传递给PinInput.Root组件，将PIN码输入框附加到输入字段

import { PinInput } from "@chakra-ui/react"

const Demo = () => {
  return (
    <PinInput.Root attached>
      <PinInput.HiddenInput />
      <PinInput.Control>
        <PinInput.Input index={0} />
        <PinInput.Input index={1} />
        <PinInput.Input index={2} />
        <PinInput.Input index={3} />
      </PinInput.Control>
    </PinInput.Root>
  )
}

字母数字

将type属性传递给PinInput.Root组件，允许用户输入字母数字字符。值可以是alphanumeric（字母数字）、numeric（数字）或alphabetic（字母）

import { PinInput } from "@chakra-ui/react"

const Demo = () => {
  return (
    <PinInput.Root type="alphanumeric">
      <PinInput.HiddenInput />
      <PinInput.Control>
        <PinInput.Input index={0} />
        <PinInput.Input index={1} />
        <PinInput.Input index={2} />
        <PinInput.Input index={3} />
      </PinInput.Control>
    </PinInput.Root>
  )
}

封闭组件

以下是如何为封闭式组件组合设置PIN码输入框。

import { PinInput as ChakraPinInput, Group } from "@chakra-ui/react"
import * as React from "react"

export interface PinInputProps extends ChakraPinInput.RootProps {
  rootRef?: React.RefObject<HTMLDivElement | null>
  count?: number
  inputProps?: React.InputHTMLAttributes<HTMLInputElement>
  attached?: boolean
}

export const PinInput = React.forwardRef<HTMLInputElement, PinInputProps>(
  function PinInput(props, ref) {
    const { count = 4, inputProps, rootRef, attached, ...rest } = props
    return (
      <ChakraPinInput.Root ref={rootRef} {...rest}>
        <ChakraPinInput.HiddenInput ref={ref} {...inputProps} />
        <ChakraPinInput.Control>
          <Group attached={attached}>
            {Array.from({ length: count }).map((_, index) => (
              <ChakraPinInput.Input key={index} index={index} />
            ))}
          </Group>
        </ChakraPinInput.Control>
      </ChakraPinInput.Root>
    )
  },
)

用法

<PinInput mask />

属性

根

属性	默认值	类型
`placeholder`	`'\'○\''`	`字符串` 输入的占位文本
`type`	`'\'numeric\''`	`'numeric' \| 'alphabetic' \| 'alphanumeric'` PIN码输入框应允许的值类型
`colorPalette`	`'gray'`	`'gray' \| 'red' \| 'orange' \| 'yellow' \| 'green' \| 'teal' \| 'blue' \| 'cyan' \| 'purple' \| 'pink'` 组件的调色板
`size`	`'md'`	`'2xs' \| 'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl'` 组件的尺寸
`variant`	`'outline'`	`'outline' \| 'subtle' \| 'flushed'` 组件的变体
`asChild`		`布尔值` 使用提供的子元素作为默认渲染元素，结合它们的属性和行为。欲了解更多详情，请阅读我们的组合指南。
`autoFocus`		`布尔值` 是否自动聚焦第一个输入框。
`blurOnComplete`		`布尔值` 当值完成时是否使输入框失焦
`defaultValue`		`字符串数组` PIN码输入框首次渲染时的初始值。当您不需要控制PIN码输入框的状态时使用。
`disabled`		`布尔值` 输入框是否被禁用
`form`		`字符串` 底层输入元素的关联表单。
`id`		`字符串` 组件的唯一标识符。
`ids`		`Partial<{ root: string hiddenInput: string label: string control: string input(id: string): string }>` PIN码输入框中元素的ID。对于组合很有用。
`invalid`		`布尔值` PIN码输入框是否处于无效状态
`mask`		`布尔值` 如果`true`，输入框的值将被遮罩，就像`type=password`一样。
`name`		`字符串` 输入元素的名称。对于表单提交很有用。
`onValueChange`		`(details: ValueChangeDetails) => void` 输入变化时调用的函数
`onValueComplete`		`(details: ValueChangeDetails) => void` 所有输入框都有有效值时调用的函数
`onValueInvalid`		`(details: ValueInvalidDetails) => void` 输入无效值时调用的函数
`otp`		`布尔值` 如果`true`，PIN码输入组件会向其字段发出信号，指示它们应使用`autocomplete="one-time-code"`。
`pattern`		`字符串` 用于检查用户输入值的正则表达式。
`readOnly`		`布尔值` PIN码输入框是否处于有效状态
`required`		`布尔值` 是否要求PIN码输入
`selectOnFocus`		`布尔值` 输入框聚焦时是否选择输入值
`translations`		`IntlTranslations` 指定标识可访问性元素及其状态的本地化字符串。
`value`		`字符串数组` PIN码输入框的值。
`attached`		`'true' \| 'false'` 组件的附加状态。

密码输入

气泡卡片

PIN码输入

.css-vfo6uh{color:var(--chakra-colors-fg);-webkit-text-decoration:underline;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:2px;text-decoration-color:var(--chakra-colors-border-emphasized);font-weight:500;}用法

用法