---
name: Dropdown
menu: Components
---

# Dropdown
import Dropdown from './index'
import DropdownOption from './lib/DropdownOption'
import Button from '../button/index'
import Icon from '../icon/index'
import { Playground, Props } from 'docz'
import './style/index.scss'

## Props & Methods
<Props of={Dropdown} />

### 👆 options
<Props of={DropdownOption} />


## Basic Usage
<Playground>
    <Dropdown
            options={[
              { value: 'Apple' },
              { value: 'Banana' },
              { value: 'Coconut' },
            ]}
            style={{ width: '200px' }}
          />
</Playground>

## Placeholder
<Playground>
<Dropdown
            options={[
              { value: 'Apple' },
              { value: 'Banana' },
              { value: 'Coconut' },
            ]}
            style={{ width: '200px' }}
            placeholder="I am the placeholder"
          />
</Playground>

## Display Variants
<Playground>
    <Dropdown
            options={[
              { value: 'Apple' },
              { value: 'Banana' },
              { value: 'Coconut' },
            ]}
            style={{ width: '200px' }}
            placeholder="I am cleanable"
            cleanable
          />
    <span style={{display: 'inline-block', width: '15px',}}></span>
    <Dropdown
            options={[
              { value: 'Apple' },
              { value: 'Banana' },
              { value: 'Coconut' },
            ]}
            placeholder={'No icon on the right!'}
            style={{ width: '200px' }}
            noIcon
          />
    <span style={{display: 'inline-block', width: '15px',}}></span>
    <Dropdown
            options={[
              { value: 'Apple' },
              { value: 'Banana' },
              { value: 'Coconut' },
            ]}
            placeholder={'No border around!'}
            style={{ width: '200px' }}
            noBorder
          />
    <span style={{display: 'inline-block', width: '15px',}}></span>
    <Dropdown
            options={[
              { value: 'Apple' },
              { value: 'Banana' },
              { value: 'Coconut' },
            ]}
            placeholder={'Selected icon shows!'}
            showSelectedIcon
            style={{ width: '200px' }}
          />
    <span style={{display: 'inline-block', width: '15px',}}></span>
    <Dropdown
            options={[
              { value: 'Apple' },
              { value: 'Banana' },
              { value: 'Coconut' },
            ]}
            placeholder={'I am disabled'}
            style={{ width: '200px' }}
            disabled
          />
</Playground>

## Set Width of Dropdown
<Playground>
    <Dropdown
        options={[
        { value: 'Apple' },
        { value: 'Banana' },
        { value: 'Coconut' },
        ]}
        placeholder={'A default dropdown!'}
        style={{ width: '200px' }}
    />
    <span style={{display: 'inline-block', width: '15px',}}></span>
    <Dropdown
        options={[
        { value: 'Apple' },
        { value: 'Banana' },
        { value: 'Coconut' },
        ]}
        placeholder={'A narrow dropdown!'}
        style={{ width: '200px' }}
        dropdownWidth={100}
    />
    <span style={{display: 'inline-block', width: '15px',}}></span>
    <Dropdown
        options={[
        { value: 'Apple' },
        { value: 'Banana' },
        { value: 'Coconut' },
        ]}
        placeholder={'A wide dropdown!'}
        style={{ width: '200px' }}
        dropdownWidth={400}
    />
</Playground>

## Hoverable
<Playground>
<Dropdown
            options={[
              { value: 'Apple' },
              { value: 'Banana' },
              { value: 'Coconut' },
            ]}
            style={{ width: '200px' }}
            placeholder="I am hoverable"
            hoverable
          />
</Playground>

## Searchable
<Playground>
{() => {
    let bigOptions = [];
    for (let i = 0; i < 100; i++) {
      bigOptions.push({
        value: i,
        display: `display${i}`,
        search: `display${i}`,
      });
    }
    return  <Dropdown
            options={bigOptions}
            placeholder={'Type to search'}
            searchable
            style={{ width: '200px' }}
          />
}
}
</Playground>

## Preset Option
<Playground>
{() => {
    const myOptions=[
            { value: 'Apple' },
            { value: 'Banana' },
            { value: 'Coconut' },
        ];
    return <Dropdown
        options={myOptions}
        value={myOptions[0].value}
        style={{ width: '200px' }}
    />
}
}
</Playground>

## Async Options
<Playground>
{() => {
    class Example extends React.Component{
        constructor(props) {
            super(props);
            this.state = {
            asnycOptions: null,
            }
        }
        render(){
            return <>
                <Dropdown
                    options={this.state.asnycOptions}
                    style={{ width: '200px' }}
                />
                <span style={{display: 'inline-block', width: '15px',}}></span>
                <Button onClick={() => {
                    this.setState({
                    asnycOptions: [
                        { value: 'Apple' },
                        { value: 'Banana' },
                        { value: 'Coconut' },
                    ]
                    });
                }}
                size='s'>Click me to load async options</Button>
            </>
        }
    }
    return <Example />
    }
}
</Playground>

## Icon Options
<Playground>
    <Dropdown
        options={[
            {
            display: <Icon
                type="add"
            />,
            value: '1' // value is for identity
            }, {
            display: <Icon
                type="alert"
            />,
            value: '2'
            }, {
            display: <><Icon
                type="arrow-bottom"
            /><span> Hello</span></>,
            value: '3'
            }
        ]}
        placeholder={'Options with Icon!'}
        style={{ width: '200px' }}
        />
</Playground>

## Group Options
<Playground>
{() => {
    const groupOptions = [{
      label: '热门城市',
      options: [{
        value: 'Beijing',
        display: '北京',
        search: '北京',
      }, {
        value: 'Shanghai',
        display: '上海',
        search: '上海',
      }, {
        value: 'Guangzhou',
        display: '广州',
        search: '广州',
      }],
    }, {
      label: '城市名',
      options: [{
        value: 'Chengdu',
        display: '成都',
        search: '成都',
      }, {
        value: 'Shenzhen',
        display: '深圳',
        search: '深圳',
      }, {
        value: 'Guangzhou',
        display: '广州',
        search: '广州',
      }, {
        value: 'Hangzhou',
        display: '杭州',
        search: '杭州',
      }],
    }];
    return <Dropdown
            options={groupOptions}
            placeholder={'Options with Group!'}
            style={{ width: '200px' }}
            searchable
          />
}
}
</Playground>

## Customized Options Template
<Playground>
{() => {
    const options=[
            { value: 'Apple' },
            { value: 'Banana' },
            { value: 'Coconut' },
        ];
    const groupOptions = [{
      label: '热门城市',
      options: [{
        value: 'Beijing',
        display: '北京',
        search: '北京',
      }, {
        value: 'Shanghai',
        display: '上海',
        search: '上海',
      }, {
        value: 'Guangzhou',
        display: '广州',
        search: '广州',
      }],
    }, {
      label: '城市名',
      options: [{
        value: 'Chengdu',
        display: '成都',
        search: '成都',
      }, {
        value: 'Shenzhen',
        display: '深圳',
        search: '深圳',
      }, {
        value: 'Guangzhou',
        display: '广州',
        search: '广州',
      }, {
        value: 'Hangzhou',
        display: '杭州',
        search: '杭州',
      }],
    }];
    return <>
        <Dropdown
                options={options}
                placeholder={'Customized Simple Options'}
                style={{ width: '200px' }}
            >{
                options.map(option => {
                return (
                    <Dropdown.Option key={option.value} option={option}>
                    <span style={{ float: 'left' }}>{option.value}</span>
                    <span style={{ float: 'right' }}>{option.value.toUpperCase()}</span>
                    </Dropdown.Option>
                );
                })
            }
        </Dropdown>
        <span style={{display: 'inline-block', width: '15px',}}></span>
        <Dropdown
            options={groupOptions}
            placeholder={'Customized Group Options'}
            style={{ width: '200px' }}
            searchable
          >{
            groupOptions.map(group => {
              return (
                <Dropdown.OptionGroup key={group.label} label={group.label}>{
                  group.options.map(option => {
                    return (
                      <Dropdown.Option key={option.value} option={option}>
                        <span style={{ float: 'left' }}>{option.display}</span>
                        <span style={{ float: 'right' }}>{option.value}</span>
                      </Dropdown.Option>
                    );
                  })
                }</Dropdown.OptionGroup>
              );
            })
          }
        </Dropdown>
    </>
}
}

</Playground>

## onBlur
<Playground>
{() => {
    const myOptions=[
            { value: 'Apple' },
            { value: 'Banana' },
            { value: 'Coconut' },
        ];
    return <Dropdown
    options={myOptions}
    placeholder="Select something!"
    style={{ width: '200px' }}
    onBlur={console.log}
  />
}}
</Playground>

## onFocus
<Playground>
{() => {
    const myOptions=[
            { value: 'Apple' },
            { value: 'Banana' },
            { value: 'Coconut' },
        ];
    return <Dropdown
    options={myOptions}
    placeholder="Click and see logs!"
    style={{ width: '200px' }}
    onFocus={() => console.log('onFocus')}
  />
}}
</Playground>

## onCloseDropDown
<Playground>
{() => {
    const myOptions=[
            { value: 'Apple' },
            { value: 'Banana' },
            { value: 'Coconut' },
        ];
    return <Dropdown
    options={myOptions}
    placeholder="Show dropdown, then close dropdown"
    style={{ width: '200px' }}
    onCloseDropDown={() => console.log('onCloseDropDown')}
  />
}}
</Playground>