Select

Maeng Design의 Select 컴포넌트는 여러 옵션 중 하나 이상의 옵션을 선택할 수 있는 옵션 메뉴를 제공하는 컨트롤을 나타냅니다.

Size

small, medium, large 3가지의 size가 존재합니다.

import React from 'react';
import { Select } from 'maeng-design';

const { Option } = Select;

const App = () => (
  <div>
    <Select placeholder="Select Member" size="medium">
      <Option value="maeng">Maeng</Option>
      <Option value="aesop">Aesop</Option>
      <Option value="backey">Backey</Option>
      <Option value="rachel">Rachel</Option>
      <Option value="solar">Solar</Option>
      <Option value="tabber">Tabber</Option>
    </Select>
  </div>
);

TagRender

선택된 옵션을 태그 형태로 변환합니다.

import React from 'react';
import { Select } from 'maeng-design';

const { Option } = Select;

const App = () => (
  <div>
    <Select placeholder="Select Member" tagRender>
      <Option value="maeng">Maeng</Option>
      <Option value="aesop">Aesop</Option>
      <Option value="backey">Backey</Option>
      <Option value="rachel">Rachel</Option>
      <Option value="solar">Solar</Option>
      <Option value="tabber">Tabber</Option>
    </Select>
  </div>
);

Multiple

하나 이상의 옵션들을 선택을 할 수 있습니다.

import React from 'react';
import { Select } from 'maeng-design';

const { Option } = Select;

const App = () => (
  <div>
    <Select placeholder="Select Member"
      multiple
      defaultValue={['maeng', 'aesop']}
    >
      <Option value="maeng">Maeng</Option>
      <Option value="aesop">Aesop</Option>
      <Option value="backey">Backey</Option>
      <Option value="rachel">Rachel</Option>
      <Option value="solar">Solar</Option>
      <Option value="tabber">Tabber</Option>
    </Select>
    <Select placeholder="Select Member"
      multiple
      tagRender
      defaultValue={['maeng', 'aesop', 'rachel', 'solar']}
    >
      <Option value="maeng">Maeng</Option>
      <Option value="aesop">Aesop</Option>
      <Option value="backey">Backey</Option>
      <Option value="rachel">Rachel</Option>
      <Option value="solar">Solar</Option>
      <Option value="tabber">Tabber</Option>
    </Select>
  </div>
);

Select API

Select 속성을 설정하여 다양한 Select를 생성하고 컨트롤 할 수 있습니다.

Property	Description	Type	default
size	Select 박스의 크기를 지정할 수 있습니다.	small medium large	medium
defaultValue	초기 선택된 값을 세팅합니다.	string \| number \| (string \| number)[]	-
placeholder	Select 박스에 사용자가 적절한 값을 선택할 수 있도록 도와주는 안내문구를 표시합니다.	string	-
color	Select 컴포넌트의 색상을 지정할 수 있습니다.	ColorName	blue6
multiple	다중 선택을 할 수 있습니다.	boolean	false
tagRender	선택된 옵션 값을 태그 형태로 나타낼 수 있습니다.	boolean	false
disabled	Select 박스를 비활성화 시킬 수 있습니다.	boolean	false
onSelect	선택한 옵션 값을 인자로 받아옵니다.	(value) => void	-
onChange	선택된 값을 인자로 받아옵니다.	(value) => void;	-

Option API

Select의 옵션 컴포넌트입니다.