Select

import { Select } from "@ellie-ui/core";

export const Example = () => {
  return (
    <Select placeholder="항목을 선택해주세요">
      <Select.Option value="1">항목 1</Select.Option>
      <Select.Option value="2">항목 2</Select.Option>
      <Select.Option value="3">항목 3</Select.Option>
    </Select>
  )
}

import { Select } from "@ellie-ui/core";

export const Example = () => {
  return (
    <Select placeholder="항목을 선택해주세요" disabled>
      <Select.Option value="1">항목 1</Select.Option>
      <Select.Option value="2">항목 2</Select.Option>
      <Select.Option value="3">항목 3</Select.Option>
    </Select>
  )
}

import { Select } from "@ellie-ui/core";

export const Example = () => {
  return (
    <Select placeholder="항목을 선택해주세요">
      <Select.Option value="1">항목 1</Select.Option>
      <Select.Option value="2" disabled>항목 2</Select.Option>
      <Select.Option value="3">항목 3</Select.Option>
    </Select>
  )
}

import { Select } from "@ellie-ui/core";

export const Example = () => {
  return (
    <Select placeholder="항목을 선택해주세요" invalid>
      <Select.Option value="1">항목 1</Select.Option>
      <Select.Option value="2">항목 2</Select.Option>
      <Select.Option value="3">항목 3</Select.Option>
    </Select>
  )
}

import { Select } from "@ellie-ui/core";

export const Example = () => {
  return (
    <Select placeholder="항목을 선택해주세요">
      <Select.Group label="그룹 1">
        <Select.Option value="1">항목 1</Select.Option>
        <Select.Option value="2">항목 2</Select.Option>
        <Select.Option value="3">항목 3</Select.Option>
      </Select.Group>
      <Select.Group label="그룹 2">
        <Select.Option value="4">항목 4</Select.Option>
        <Select.Option value="5">항목 5</Select.Option>
        <Select.Option value="6">항목 6</Select.Option>
      </Select.Group>
    </Select>
  )
}

import { Select } from "@ellie-ui/core";
import { useSelect } from "@ellie-ui/core/hooks";

export const Example = () => {
  const select = useSelect()

  return (
    <Select
      value={select.value}
      onValueChange={select.onValueChange}
      placeholder="항목을 선택해주세요"
    >
      <Select.Option value="1">항목 1</Select.Option>
      <Select.Option value="2">항목 2</Select.Option>
      <Select.Option value="3">항목 3</Select.Option>
    </Select>
  )
}