Installation

yarn

yarn add elast-ui

npm

npm install elast-ui

Components

Select

Select 컴포넌트는 다음과 같은 서브 컴포넌트들로 구성됩니다:

서브 컴포넌트

• Select: 전체 셀렉트 박스를 관리하는 루트 컴포넌트
• Select.Trigger: 드롭다운을 열고 닫는 버튼 역할
• Select.OptionWrapper: 드롭다운의 옵션들을 감싸는 래퍼
• Select.Option: 개별 옵션 아이템
• Select.Error: 유효성 검사에 따른 에러 메시지를 표시하는 컴포넌트

기본 예제

import React, { useState } from "react";
import { Select } from "elast-ui";

const Example = () => {
  const [selectedValue, setSelectedValue] = useState<string>("");

  const handleChange = (value: string) => {
    setSelectedValue(value);
  };

  return (
    <form>
      <Select
        value={selectedValue}
        onChange={handleChange}
        required
      >
        <Select.Trigger>옵션을 선택하세요</Select.Trigger>
        <Select.OptionWrapper>
          <Select.Option value="option1">옵션 1</Select.Option>
          <Select.Option value="option2">옵션 2</Select.Option>
          <Select.Option value="option3">옵션 3</Select.Option>
        </Select.OptionWrapper>
        <Select.Error>필수 항목입니다.</Select.Error>
      </Select>
      <button type="submit">제출</button>
    </form>
  );
};

export default Example;