Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Input

텍스트를 입력할 수 있는 입력 컴포넌트입니다.

import { Input } from 'sud-ui';

GitHub에서 소스코드 보기

사용할 때

텍스트를 입력할 때.

사용예제

Basic Usage

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

Disabled

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

text

number

Input Type

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

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

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

  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>
      <Input
        type={type}
        value={type === "text" ? textValue : numberValue}
        onChange={(e) =>
          type === "text"
            ? setTextValue(e.target.value)
            : setNumberValue(e.target.value)
        }
        placeholder={`${type} type Input`}
      />
    </div>
  );
};

export default TypeInput;

Clearable

clearable 속성을 추가하면 입력 필드의 값을 지울 수 있습니다.

name

Label

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

Auto Complete

자동 완성 기능이 있는 입력 필드입니다.

rounded

square

capsule

Shape

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

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

const ShapeInput = () => {
  const [shape, setShape] = useState('rounded');
  const [shapeValue, setShapeValue] = useState('');
  
  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>
      <Input
        shape={shape}
        value={shapeValue}
        onChange={(e) => setShapeValue(e.target.value)}
        placeholder={`${shape} Shape Input`}
      />
    </div>
  );
};

export default ShapeInput;

prefix

suffix

₩

Prefix/Suffix

입력 필드 앞뒤에 텍스트를 추가할 수 있습니다.

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

const PrefixSuffixInput = () => {
  const [prefixSuffix, setPrefixSuffix] = useState('prefix');
  
  const prefixSuffixOptions = [
    { label: 'prefix', value: 'prefix' },
    { label: 'suffix', value: 'suffix' }
  ];

  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={prefixSuffixOptions}
            direction="horizontal"
            value={prefixSuffix}
            onChange={setPrefixSuffix}
          />
        </div>
      </Card>
      <div className="flex flex-col gap-[20px]">
        <Input
          {...(prefixSuffix === "prefix"
            ? { prefix: "₩" }
            : { suffix: "KRW" })}
        value={prefixSuffixValue}
        onChange={(e) => setPrefixSuffixValue(e.target.value)}
          placeholder="Prefix/Suffix Input"
        />

        <Input
          {...(prefixSuffix === "prefix"
            ? { prefix: <Button size="sm" colorType="primary" shadow="none">Search</Button> }
            : { suffix: <Button size="sm" colorType="primary">Confirm</Button> })}
          value={prefixSuffixValue}
          onChange={(e) => setPrefixSuffixValue(e.target.value)}
          placeholder="Prefix/Suffix Input"
        />
      </div>
    </div>
  );
};

export default PrefixSuffixInput;

Thousand Separator

숫자 입력 시 3자리마다 콤마를 추가합니다.

import React, { useState } from 'react';
import { Input } from 'sud-ui';

const ThousandSeparatorInput = () => {
  const [value, setValue] = useState("");

  return (
    <Input
      type="number"
      thousandSeparator
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Enter number"
    />
  );
};

export default ThousandSeparatorInput;

Size

Input 의 크기를 설정할 수 있습니다.

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

const SizeInput = () => {
  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>
      <Input
        size={size}
        value={value}
        onChange={(e) => setValue(e.target.value)}
        placeholder={`${size} 크기의 Input 입니다.`}
      />
    </div>
  );
};

export default SizeInput;

Read Only

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

0/12

Max Length

최대 입력 길이를 설정할 수 있습니다.

Password

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

Underline

밑줄 스타일의 입력 필드입니다.

Error State

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

before

after

Icon

입력 필드 앞뒤에 아이콘을 추가할 수 있습니다.

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

const IconInput = () => {
  const [iconPosition, setIconPosition] = useState('after');
  const [iconValue, setIconValue] = useState('');
  
  const iconPositionOptions = [
    { label: 'before', value: 'before' },
    { label: 'after', value: 'after' }
  ];

  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={iconPositionOptions}
            direction="horizontal"
            value={iconPosition}
            onChange={setIconPosition}
          />
        </div>
      </Card>
      <Input
        {...(iconPosition === "before"
          ? { beforeIcon: <Search /> }
          : { afterIcon: <Search /> })}
        value={iconValue}
        onChange={(e) => setIconValue(e.target.value)}
        placeholder="Icon Input"
      />
    </div>
  );
};

export default IconInput;

blue

green

orange

red

forest

purple

volcano

lime

Color Customization

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

import React, { useState } from 'react';
import { Input } from 'sud-ui';

const CustomColorInput = () => {
  const [value, setValue] = useState("");

  return (
    <div className="flex flex-col gap-[20px]">
      <Input
        placeholder="Enter textColor"
        value={value}
        onChange={(e) => setValue(e.target.value)}
        color={`${value}-8`}
        background={`${value}-1`}
        borderColor={`${value}-8`}
      />
      <div className="flex flex-wra gap-[10px]">
        <Tag colorType="blue">blue</Tag>
        <Tag colorType="green">green</Tag>
        <Tag colorType="orange">orange</Tag>
        <Tag colorType="red">red</Tag>
        <Tag colorType="forest">forest</Tag>
        <Tag colorType="purple">purple</Tag>
        <Tag colorType="volcano">volcano</Tag>
        <Tag colorType="lime">lime</Tag>
        ...
      </div>
    </div>
  );
};

export default CustomColorInput;

사용 방법

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

value

입력 필드의 값

string

onChange

값이 변경될 때 호출되는 함수 (e: ChangeEvent<HTMLInputElement>) => void

(e: ChangeEvent<HTMLInputElement>) => void

placeholder

입력 필드의 placeholder 텍스트

string

type

입력 필드의 타입 (InputType)

text

password

number

int

tel

url

file

hidden

submit

reset

text

size

입력 필드의 크기 (InputSize)

shape

입력 필드의 모서리 모양

square

circle

rounded

capsule

rounded

disabled

입력 필드 비활성화 여부

boolean

false

readOnly

읽기 전용 여부

boolean

false

autoFocus

자동 포커스 여부

boolean

false

password

비밀번호 입력 필드 여부

boolean

false

maxLength

최대 입력 길이

number

clearable

값을 지울 수 있는 버튼 표시 여부

boolean

false

label

입력 필드의 라벨

string | ReactNode

underline

밑줄 스타일 여부

boolean

false

autoComplete

자동 완성 속성

string

error

에러 상태 여부

boolean

false

errorText

에러 메시지

string

beforeIcon

입력 필드 앞에 표시될 아이콘

ReactNode

afterIcon

입력 필드 뒤에 표시될 아이콘

ReactNode

prefix

입력 필드 앞에 표시될 텍스트

ReactNode

suffix

입력 필드 뒤에 표시될 텍스트

ReactNode

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

추가 스타일

React.CSSProperties

{}

thousandSeparator

숫자 입력 시 3자리마다 콤마 추가 여부

boolean

false

onEnter

Enter 키를 눌렀을 때 호출되는 함수 (e: KeyboardEvent<HTMLInputElement>) => void

(e: KeyboardEvent<HTMLInputElement>) => void

onKeyDown

키를 눌렀을 때 호출되는 함수 (e: KeyboardEvent<HTMLInputElement>) => void

(e: KeyboardEvent<HTMLInputElement>) => void

onClick

클릭 이벤트 핸들러 (e: MouseEvent<HTMLDivElement>) => void

(e: MouseEvent<HTMLDivElement>) => void

입력 필드의 ID

string

name

입력 필드의 name 속성

string

ariaLabel

ARIA 라벨 (접근성)

string

required

필수 입력 여부

boolean

false

ariaRequired

ARIA required 속성 (접근성)

boolean

ariaInvalid

ARIA invalid 속성 (접근성)

boolean

ariaDescribedby

ARIA describedby 속성 (접근성)

string

개인정보 처리방침

서비스 약관