PinInput

PinInput

사용자로부터 핀 코드 또는 일회용 비밀번호(OTP)를 입력받는 컴포넌트예요.

출처: 문서

본문

사용법 (Usage)

PinInput을 사용해 핀 코드나 OTP를 입력받아요. size, length, mask, placeholder, disabled, error, type 등의 prop을 지원해요.

import { PinInput } from '@mantine/core';

function Demo() {
  return <PinInput length={4} />;
}

제어 방식 (Controlled)

import { useState } from 'react';
import { PinInput } from '@mantine/core';

function Demo() {
  const [value, setValue] = useState('');
  return <PinInput value={value} onChange={setValue} />;
}

비제어 방식 (Uncontrolled)

PinInput은 네이티브 인풋 요소와 같은 방식으로 비제어 폼과 함께 사용할 수 있어요. 폼 제출 시 FormData 객체에 핀 입력 값을 포함하려면 name 속성을 설정해요. 비제어 폼에서 초기 값을 제어하려면 defaultValue prop을 사용해요.

FormData와 함께 비제어 PinInput을 사용하는 예시:

import { PinInput } from '@mantine/core';

function Demo() {
  return (
    <form
      onSubmit={(event) => {
        event.preventDefault();
        const formData = new FormData(event.currentTarget);
        console.log('PIN value:', formData.get('pin'));
      }}
    >
      <PinInput name="pin" />
      <button type="submit">Submit</button>
    </form>
  );
}

정규식 유형 (Regex type)

정규식을 사용해 사용자 입력을 검증할 수 있어요. 주어진 표현식과 일치하지 않는 문자는 무시돼요. 예를 들어 0부터 3까지의 숫자만 받는 PinInput을 만들려면 type={/^[0-3]+/}을 설정해요.

import { PinInput } from '@mantine/core';

function Demo() {
  return <PinInput type={/^[0-3]+/} />;
}

일회용 코드 (One time code)

일부 운영체제는 마지막으로 받은 SMS 코드를 키보드 같은 앱에서 사용할 수 있게 노출해요. 현재 폼 인풋이 이 코드를 요청하면 키보드가 적응해서 코드를 키보드 제안으로 제공해요. oneTimeCode prop은 인풋에 autocomplete="one-time-code"를 설정해서 이 기능을 사용할 수 있게 해요.

import { PinInput } from '@mantine/core';

function OneTimeCodeInput() {
  return <PinInput oneTimeCode />;
}

성공 상태 (Success state)

import { PinInput } from '@mantine/core';

function Demo() {
  return <PinInput error />;
}

Styles API

PinInput은 Styles API를 지원해요. classNames prop으로 컴포넌트의 내부 요소에 스타일을 추가할 수 있어요.

Styles API 셀렉터:

• root – 루트 요소
• pinInput – 인풋 항목 래퍼
• input – 인풋 요소

접근성 (Accessibility)

인풋에는 연결된 라벨이 없어요. 스크린 리더가 컴포넌트를 볼 수 있도록 aria-label을 설정해요.

import { PinInput } from '@mantine/core';

function Accessibility() {
  return <PinInput aria-label="One time password" />;
}

더 알아보기 (Learn more)

• PasswordInput
• Radio