Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

OTP

OTP 입력 컴포넌트입니다.

import { OTP } from 'sud-ui';

GitHub에서 소스코드 보기

사용할 때

OTP를 입력할 때.

사용예제

Basic Usage

기본적인 사용 방법입니다.

Disabled

disabled 속성을 추가하면 OTP 입력 필드가 비활성화됩니다.

text

int

OTP Type

OTP 입력 필드의 타입을 설정할 수 있습니다.

import React, { useState } from 'react';
import { OTP, Radio, Card } from 'sud-ui';

const TypeOTP = () => {
  const [type, setType] = useState('text');
  const [textValue, setTextValue] = useState('');
  const [numberValue, setNumberValue] = useState('');
  
  const typeOptions = [
    { label: 'text', value: 'text' },
    { label: 'int', value: 'int' },
  ];

  return (
    <div className="flex flex-col gap-[20px]">
      <Card style={{ width: "100%" }} shadow="none" colorType="sub">
        <div className="flex justify-center w-full">
          <Radio.Group
            options={typeOptions}
            direction="horizontal"
            value={type}
            onChange={setType}
          />
        </div>
      </Card>
      <OTP
        type={type}
        value={type === "text" ? textValue : numberValue}
        onChange={(e) =>
          type === "text"
            ? setTextValue(e.target.value)
            : setNumberValue(e.target.value)
        }
      />
    </div>
  );
};

export default TypeOTP;

Password

password 속성을 추가하면 OTP 입력 필드가 비밀번호 입력 필드로 변경됩니다.

Error State

에러 상태와 메시지를 표시할 수 있습니다.

Color Customization

OTP 입력 필드의 색상을 커스텀할 수 있습니다.

Size

OTP 입력 필드의 크기를 설정할 수 있습니다.

import React, { useState } from 'react';
import { OTP, Radio, Card } from 'sud-ui';

const SizeOTP = () => {
  const [size, setSize] = useState('md');
  const [value, setValue] = useState('');
  
  const sizeOptions = [
    { label: 'sm', value: 'sm' },
    { label: 'md', value: 'md' },
    { label: 'lg', value: 'lg' }
  ];

  return (
    <div className="flex flex-col gap-[20px]">
      <Card style={{ width: "100%" }} shadow="none" colorType="sub">
        <div className="flex justify-center w-full">
          <Radio.Group
            options={sizeOptions}
            direction="horizontal"
            value={size}
            onChange={setSize}
          />
        </div>
      </Card>
      <OTP
        size={size}
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </div>
  );
};

export default SizeOTP;

Read Only

readOnly 속성을 추가하면 OTP 입력 필드가 읽기 전용으로 변경됩니다.

Length

OTP 입력 필드의 길이를 설정할 수 있습니다.

OTP input

Label

label 속성을 추가하면 OTP 입력 필드의 라벨을 설정할 수 있습니다.

rounded

square

capsule

Shape

OTP 입력 필드의 모서리 모양을 설정할 수 있습니다.

import React, { useState } from 'react';
import { OTP, Radio, Card } from 'sud-ui';

const ShapeOTP = () => {
  const [shape, setShape] = useState('rounded');
  
  const shapeOptions = [
    { label: 'rounded', value: 'rounded' },
    { label: 'square', value: 'square' },
    { label: 'capsule', value: 'capsule' }
  ];

  return (
    <div className="flex flex-col gap-[20px]">
      <Card style={{ width: "100%" }} shadow="none" colorType="sub">
        <div className="flex justify-center w-full">
          <Radio.Group
            options={shapeOptions}
            direction="horizontal"
            value={shape}
            onChange={setShape}
          />
        </div>
      </Card>
      <OTP
        shape={shape}
        value={shapeValue}
        onChange={(e) => setShapeValue(e.target.value)}
      />
    </div>
  );
};

export default ShapeOTP;

text

int

Alphanumeric Type

영문자와 숫자를 모두 입력할 수 있는 OTP 입력 필드입니다.

import React, { useState } from 'react';
import { OTP, Radio, Card } from 'sud-ui';

const AlphanumericOTP = () => {
  const [type, setType] = useState('alphanumeric');
  const [textValue, setTextValue] = useState('');
  const [numberValue, setNumberValue] = useState('');
  
  const typeOptions = [
    { label: 'text', value: 'text' },
    { label: 'int', value: 'int' },
  ];

  return (
    <div className="flex flex-col gap-[20px]">
      <Card style={{ width: "100%" }} shadow="none" colorType="sub">
        <div className="flex justify-center w-full">
          <Radio.Group
            options={typeOptions}
            direction="horizontal"
            value={type}
            onChange={setType}
          />
        </div>
      </Card>
      <OTP
        type={type}
        value={type === "alphanumeric" ? textValue : numberValue}
        onChange={(e) =>
          type === "alphanumeric"
            ? setTextValue(e.target.value)
            : setNumberValue(e.target.value)
        }
      />
    </div>
  );
};

export default AlphanumericOTP;

사용 방법

컴포넌트의 props를 설정하는 방법입니다.

value

OTP 입력 필드의 값

string

onChange

값이 변경될 때 호출되는 함수 ((e: { target: { value: string } }) => void)

(e: { target: { value: string } }) => void

length

OTP 입력 필드의 개수

number

type

OTP 입력 필드의 타입 ("int" | "text")

text

int

size

OTP 입력 필드의 크기 ("sm" | "md" | "lg")

shape

OTP 입력 필드의 모서리 모양 (shapeType)

square

circle

rounded

capsule

rounded

disabled

OTP 입력 필드 비활성화 여부

boolean

false

readOnly

읽기 전용 여부

boolean

false

autoFocus

자동 포커스 여부

boolean

false

password

비밀번호 입력 필드 여부

boolean

false

underline

밑줄 스타일 여부

boolean

false

label

OTP 입력 필드의 라벨 (string | ReactNode)

string | ReactNode

error

에러 상태 여부

boolean

false

errorText

에러 메시지

string

background

배경색(palette값 또는 HEX code)

string

color

텍스트 색상(palette값 또는 HEX code)

string

border

테두리 표시 여부

boolean

true

borderColor

테두리 색상(palette값 또는 HEX code)

string

borderType

테두리 스타일

solid

dashed

dotted

double

groove

ridge

inset

outset

none

solid

borderWeight

테두리 두께

number

shadow

그림자 크기

none

className

추가 클래스명

string

style

추가 스타일

CSSProperties

{}

개인정보 처리방침

서비스 약관