Soon UI Design

Layout
Navigation
Input
Select
Display
Feedback

Select

선택사항을 드롭다운으로 보여주는 메뉴입니다.

import { Select } from 'sud-ui';

GitHub에서 소스코드 보기

사용할 때

선택 옵션이 많을 때

선택 옵션이 길어질 때

입력과 선택이 필요한 경우

사용예제

Basic Usage

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

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

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

  const options = [
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' },
    { label: 'Option 3', value: 'option3' }
  ];

  return (
    <Select
      options={options}
      value={value}
      onChange={(e) => setValue(e)}
      placeholder="Select an option."
    />
  );
};

export default BasicSelect;

Disabled

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

Searchable

Searchable 속성을 추가하면 입력 필드에 검색 기능을 추가할 수 있습니다.

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

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

  const options = [
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" },
    { label: "Option 3", value: "option3" }
  ];

  return (
    <Select options={options} searchable placeholder="Searchable Select." />
  );
};

export default SearchableSelect;

name

Label

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

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

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

  const options = [
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" },
    { label: "Option 3", value: "option3" }
  ];

  return (
    <Select
      options={options}
      value={value}
      onChange={(e) => setValue(e)}
      label="name"
      placeholder="Label Select."
    />
  );
};

export default LabelSelect;

Error State

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

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

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

  const options = [
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" },
    { label: "Option 3", value: "option3" }
  ];

  return (
    <Select
      options={options}
      value={value}
      onChange={(e) => setValue(e)}
      error={value.length > 0}
      errorText="Error Message."
      placeholder="Error State Select."
    />
  );
};

export default ErrorSelect;

Color Customization

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

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

const CustomColorSelect = () => {
  const [value, setValue] = useState("cool-gray");

  const options = [
    { label: "cool-gray", value: "cool-gray" },
    { label: "forest", value: "forest" },
    { label: "volcano", value: "volcano" },
    { label: "gold", value: "gold" },
    { label: "cerulean", value: "cerulean" }
  ];

  return (
    <Select
      options={options}
      placeholder="Color Customization Select."
      value={value}
      onChange={(e) => setValue(e)}
      color={`${colorValue}-8`}
      background={`${colorValue}-1`}
      borderColor={`${colorValue}-8`}
    />
  );
};

export default CustomColorSelect;

Multi Mode

다중 선택 모드를 사용할 수 있습니다.

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

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

  const options = [
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" },
    { label: "Option 3", value: "option3" }
  ];

  return (
    <Select
      options={options}
      placeholder="Multi Mode Select."
      value={value}
      onChange={(e) => setValue(e)}
      multiMode
      tagColorType="sky"
    />
  );
};

export default MultiModeSelect;

Size

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

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

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

  const options = [
    { label: 'Option 1', value: 'option1' },
    { label: 'Option 2', value: 'option2' },
    { label: 'Option 3', value: 'option3' }
  ];

  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>
      <Select
          options={options}
        size={size}
        value={value}
        onChange={(e) => setValue(e)}
        options={options}
        placeholder={`${size} size Select.`}
      />
    </div>
  );
};

export default SizeSelect;

Read Only

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

Clearable

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

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

const ClearableSelect = () => {
  const [value, setValue] = useState("Try to Clear!");

  const options = [
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" },
    { label: "Option 3", value: "option3" }
  ];

  return (
    <Select
      options={options}
      value={value}
      onChange={(e) => setValue(e)}
      clearable
      placeholder="Clearable Select."
    />
  );
};

export default ClearableSelect;

Underline

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

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

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

  const options = [
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" },
    { label: "Option 3", value: "option3" }
  ];

  return (
    <Select
      options={options}
      value={value}
      onChange={(e) => setValue(e)}
      underline
      placeholder="Underline Select."
    />
  );
};

export default UnderlineSelect;

rounded

square

capsule

Shape

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

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

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

  const options = [
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" },
    { label: "Option 3", value: "option3" }
  ];

  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>
      <Select
        options={options}
        shape={shape}
        value={shapeValue}
        onChange={(e) => setShapeValue(e)}
        placeholder={`${shape} shape Select.`}
      />
    </div>
  );
};

export default ShapeSelect;

Custom Icon

입력 필드의 앞뒤 아이콘을 커스텀할 수 있습니다.

import React, { useState } from 'react';
import { Select } from 'sud-ui';
import { Search, TriangleDown } from 'sud-icons';

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

  const options = [
    { label: "Option 1", value: "option1" },
    { label: "Option 2", value: "option2" },
    { label: "Option 3", value: "option3" }
  ];

  return (
    <Select
      options={options}
      placeholder="Icon Customization Select."
      value={value}
      onChange={(e) => setValue(e)}
      afterIcon={<Search />}
      beforeIcon={<TriangleDown />}
    />
  );
};

export default CustomIconSelect;

사용 방법

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

value

선택된 값 (multiMode일 경우 배열)

string | number | (string | number)[]

onChange

값이 변경될 때 호출되는 함수

(value: string | number | (string | number)[]) => void

placeholder

아무것도 선택되지 않았을 때 표시되는 텍스트

string

options

선택 가능한 옵션 목록

Array<{ label: ReactNode, value: string | number, content?: ReactNode }>

[]

size

Select 컴포넌트의 크기

shape

Select 컴포넌트의 모서리 모양

square

circle

rounded

capsule

rounded

disabled

Select 컴포넌트 비활성화 여부

boolean

false

readOnly

읽기 전용 여부

boolean

false

clearable

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

boolean

false

label

Select 컴포넌트의 라벨

string | ReactNode

underline

밑줄 스타일 여부

boolean

false

error

에러 상태 여부

boolean

false

errorText

에러 메시지

string

beforeIcon

Select 컴포넌트에 표시될 아이콘

ReactNode

shadow

그림자 크기

none

multiMode

다중 선택 모드 활성화 여부

boolean

false

showSelectedCount

다중 선택 모드에서 선택된 항목 수 표시 여부

boolean

false

searchable

검색 기능 사용 여부

boolean

false

tagColorType

다중 선택 모드에서 태그의 색상 타입

default

primary

success

warning

danger

info

red

rose

coral

orange

volcano

apricot

yellow

gold

amber

green

lime

mint

blue

sky

cerulean

indigo

cobalt

navy

purple

plum

orchid

forest

sage

warm-gray

cool-gray

neutral

text

ghost

default

colorType

Select 컴포넌트의 색상 타입

default

primary

success

warning

danger

info

red

rose

coral

orange

volcano

apricot

yellow

gold

amber

green

lime

mint

blue

sky

cerulean

indigo

cobalt

navy

purple

plum

orchid

forest

sage

warm-gray

cool-gray

neutral

text

ghost

default

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

dropdownStyle

드롭다운 메뉴의 추가 스타일

CSSProperties

{}

className

추가 클래스명

string

style

추가 스타일

CSSProperties

{}

개인정보 처리방침

서비스 약관