# Component/Dropdown

> Props: component-dropdown.props.txt

## Examples


### Base

```tsx
{
  args: {
    placeholder: '옵션 선택하기',
    options: options
  },
  render: args => {
    const [value, setValue] = useState<string | number>('');
    return <Stack direction='row' align='center'>
        <Dropdown width={250} {...args} value={value} onChange={setValue} />
      </Stack>;
  }
}
```

### Controlled

```tsx
{
  render: () => {
    const [value, setValue] = useState<string | number>('value-4');
    const handleButtonClick = () => {
      setValue('value-2');
    };
    return <Stack direction='row'>
        <Stack direction='column' p={6}>
          <Dropdown width={200} value={value} options={options} onChange={setValue} />
        </Stack>
        <Stack direction='column' p={6}>
          <Button kind='secondary' onClick={handleButtonClick}>
            set value-2
          </Button>
        </Stack>
      </Stack>;
  }
}
```

### Custom Label

```tsx
{
  render: () => {
    const [value, setValue] = useState<string | number>('');
    return <Dropdown value={value} width='100%' labelHeight={82} optionItemHeight={52} options={[{
      label: <Stack direction='row' width='100%' align='center' gap={16}>
                <StyledBox>
                  <IconColoredMoneyFly />
                </StyledBox>
                <Stack direction='column'>
                  <BaseText kind='Body_13_Medium'>낮은 금액 할인 상품</BaseText>
                </Stack>
              </Stack>,
      value: 'CA'
    }, {
      label: <Stack direction='row' width='100%' align='center' gap={16}>
                <StyledBox>
                  <IconColoredThumbsUp />
                </StyledBox>
                <Stack direction='column'>
                  <BaseText kind='Body_13_Medium'>노출 효율 좋은 상품</BaseText>
                </Stack>
              </Stack>,
      value: 'KO'
    }, {
      label: <Stack direction='row' width='100%' align='center' gap={16}>
                <StyledBox>
                  <IconColoredFashionIncreasing />
                </StyledBox>
                <Stack direction='column'>
                  <BaseText kind='Body_13_Medium'>반응 좋은 신상품</BaseText>
                </Stack>
              </Stack>,
      value: 'US'
    }]} onChange={setValue} renderLabel={selectedOption => {
      switch (selectedOption.value) {
        case 'CA':
          return <Stack direction='row' width='100%' align='center' gap={16} pt={4} pb={4}>
                  <StyledBox>
                    <IconColoredMoneyFly size={26} />
                  </StyledBox>
                  <Stack direction='column'>
                    <BaseText kind='Body_15_Bold'>낮은 금액 할인 상품</BaseText>
                    <BaseText kind='Body_14_Regular' color={semantic_colors.content.secondary}>
                      할인 금액이 500원 이하인 상품들을 모았어요.
                    </BaseText>
                  </Stack>
                </Stack>;
        case 'KO':
          return <Stack direction='row' width='100%' align='center' gap={16} pt={4} pb={4}>
                  <StyledBox>
                    <IconColoredThumbsUp size={26} />
                  </StyledBox>
                  <Stack direction='column'>
                    <BaseText kind='Body_15_Bold'>노출 효율 좋은 상품</BaseText>
                    <BaseText kind='Body_14_Regular' color={semantic_colors.content.secondary}>
                      구매 수 또는 노출 수가 높은 상품들을 모았어요.
                    </BaseText>
                  </Stack>
                </Stack>;
        case 'US':
          return <Stack direction='row' width='100%' align='center' gap={16} pt={4} pb={4}>
                  <StyledBox>
                    <IconColoredFashionIncreasing size={26} />
                  </StyledBox>
                  <Stack direction='column'>
                    <BaseText kind='Body_15_Bold'>반응 좋은 신상품</BaseText>
                    <BaseText kind='Body_14_Regular' color={semantic_colors.content.secondary}>
                      최근 7일간 총 매출 1,000원 또는 주문 {value}건 이상인 상품들을 모았어요.
                    </BaseText>
                  </Stack>
                </Stack>;
        default:
          return selectedOption.label;
      }
    }} />;
  }
}
```

### Custom Max Height

```tsx
{
  args: {
    placeholder: '옵션 선택하기',
    options: options
  },
  render: args => {
    const [value, setValue] = useState<string | number>('');
    return <Stack direction='row' align='center'>
        <Dropdown width={250} {...args} value={value} onChange={setValue} />
      </Stack>;
  },
  args: {
    placeholder: '옵션 선택하기',
    options: options,
    maxHeight: 100
  }
}
```

### Disabled

```tsx
{
  args: {
    placeholder: '옵션 선택하기',
    options: options
  },
  render: args => {
    const [value, setValue] = useState<string | number>('');
    return <Stack direction='row' align='center'>
        <Dropdown width={250} {...args} value={value} onChange={setValue} />
      </Stack>;
  },
  args: {
    placeholder: '옵션 선택하기',
    disabled: true,
    options: options
  }
}
```

### Disabled Option Item

```tsx
{
  args: {
    placeholder: '옵션 선택하기',
    options: options
  },
  render: args => {
    const [value, setValue] = useState<string | number>('');
    return <Stack direction='row' align='center'>
        <Dropdown width={250} {...args} value={value} onChange={setValue} />
      </Stack>;
  },
  args: {
    placeholder: '옵션 선택하기',
    options: [...options, {
      label: 'option 6',
      value: 'value-6',
      disabled: true
    }]
  }
}
```

### Error

```tsx
{
  args: {
    placeholder: '옵션 선택하기',
    options: options
  },
  render: args => {
    const [value, setValue] = useState<string | number>('');
    return <Stack direction='row' align='center'>
        <Dropdown width={250} {...args} value={value} onChange={setValue} />
      </Stack>;
  },
  args: {
    placeholder: '옵션 선택하기',
    status: 'error',
    options: options
  }
}
```

### Flip

```tsx
{
  render: args => <div>
      <div style={{
      height: '600px'
    }} />
      <Stack direction='row' align='center'>
        <Dropdown width={250} {...args} />
      </Stack>
    </div>,
  args: {
    placeholder: '옵션 선택하기',
    options: options
  }
}
```

### No Options

```tsx
{
  args: {
    placeholder: '옵션 선택하기',
    options: options
  },
  render: args => {
    const [value, setValue] = useState<string | number>('');
    return <Stack direction='row' align='center'>
        <Dropdown width={250} {...args} value={value} onChange={setValue} />
      </Stack>;
  },
  args: {
    placeholder: '옵션 선택하기',
    options: []
  }
}
```

### Size

```tsx
{
  render: () => {
    const getIconOptionsWithSize = (size: InputSize) => {
      return Array.from({
        length: 3
      }, (_, i) => i).map(value => ({
        label: <Stack direction='row' gap={getInputSpacingBySize(size)} align='center'>
            <IconCircleFill color={semantic_colors.state.positive} size={8} />
            <span>Label {value}</span>
          </Stack>,
        value
      }));
    };
    return <Stack direction='column' gap={20}>
        <Stack direction='column' gap={8}>
          <Dropdown width={250} placeholder='옵션 선택하기' options={options} size='large' />
          <Dropdown width={250} placeholder='옵션 선택하기' options={options} size='medium' />
          <Dropdown width={250} placeholder='옵션 선택하기' options={options} size='small' />
          <Dropdown width={250} placeholder='옵션 선택하기' options={options} size='xsmall' />
        </Stack>
        <Stack direction='column' gap={8}>
          <Dropdown width={250} placeholder='옵션 선택하기' options={options} status='error' size='large' />
          <Dropdown width={250} placeholder='옵션 선택하기' options={options} status='error' size='medium' />
          <Dropdown width={250} placeholder='옵션 선택하기' options={options} status='error' size='small' />
          <Dropdown width={250} placeholder='옵션 선택하기' options={options} status='error' size='xsmall' />
        </Stack>
        <Stack direction='column' gap={8}>
          <Dropdown width={250} placeholder='옵션 선택하기' options={getIconOptionsWithSize('large')} size='large' />
          <Dropdown width={250} placeholder='옵션 선택하기' options={getIconOptionsWithSize('medium')} size='medium' />
          <Dropdown width={250} placeholder='옵션 선택하기' options={getIconOptionsWithSize('small')} size='small' />
          <Dropdown width={250} placeholder='옵션 선택하기' options={getIconOptionsWithSize('xsmall')} size='xsmall' />
        </Stack>
      </Stack>;
  }
}
```

### With Form Helper Text

```tsx
{
  render: () => <Stack direction='column'>
      <Dropdown width={250} placeholder='옵션 선택하기' options={options} status='error' />
      <FormHelperText status='error'>Error Message</FormHelperText>
    </Stack>
}
```

### With Icon

```tsx
{
  render: () => {
    const iconOptions = [{
      label: <Stack direction='row' gap={8} align='center'>
            <IconCircleFill color={semantic_colors.state.positive} size={8} />
            <span>Label 1</span>
          </Stack>,
      value: 3
    }, {
      label: <Stack direction='row' gap={8} align='center'>
            <IconCircleFill color={semantic_colors.state.positive} size={8} />
            <span>Label 2</span>
          </Stack>,
      value: 2
    }];
    return <Stack direction='row' align='center' width={150}>
        <Dropdown placeholder='옵션 선택하기' options={iconOptions} />
      </Stack>;
  }
}
```