---
name: Select 选择器
route: /select
parent: 组件
menu: 数据录入
---
import { Playground, Props } from 'docz'
import  Select,{Select as SelectAPI, SelectInput}  from '../components/select'

# Select 选择器
>提示: 展开代码编辑器可以在线编辑，实时生效

## 基础用法

<Playground>
<Select placeholder='请选择' options={[{label:'选项1',value:1},
{label:'选项2',value:2},
{label:'选项3',value:3},
{label:'选项4',value:4},
{label:'选项5',value:5},
{label:'选项6',value:6}]} 
onChange={console.log}/>

</Playground>

## defaultValue

<Playground>
<Select placeholder='请选择' defaultValue={3} options={[{label:'选项1',value:1},
{label:'选项2',value:2},
{label:'选项3',value:3},
{label:'选项4',value:4},
{label:'选项5',value:5},
{label:'选项6',value:6}]} 
onChange={console.log}/>

</Playground>

## disabled

<Playground>

<Select disabled placeholder='请选择' options={[{label:'选项1',value:1},
{label:'选项2',value:2},
{label:'选项3',value:3},
{label:'选项4',value:4},
{label:'选项5',value:5},
{label:'选项6',value:6}]} 
onChange={console.log}/>

</Playground>

## filter

<Playground>

<Select filter placeholder='请选择' options={[{label:'选项1',value:1},
{label:'选项2',value:2},
{label:'选项3',value:3},
{label:'选项4',value:4},
{label:'选项5',value:5},
{label:'选项6',value:6}]} 
onChange={console.log}/>

</Playground>

## multiple
Backspace键删除已经选中的项目、Escape关闭下拉弹框，可以和filter模式混合使用

<Playground>

<Select filter multiple placeholder='请选择' width={400} options={[{label:'选项1',value:1},
{label:'选项2',value:2},
{label:'选项3',value:3},
{label:'选项4',value:4},
{label:'选项5',value:5},
{label:'选项6',value:6}]} 
onChange={console.log}/>

</Playground>

## checkbox
Backspace键删除已经选中的项目、Escape关闭下拉弹框，可以和filter模式混合使用

<Playground>

<Select checkbox multiple placeholder='请选择' width={400} options={[{label:'选项1',value:1},
{label:'选项2',value:2},
{label:'选项3',value:3},
{label:'选项4',value:4},
{label:'选项5',value:5},
{label:'选项6',value:6}]} 
onChange={console.log}/>

</Playground>


## multiple defaultValue

<Playground>

<Select defaultValue={[1,2]} filter multiple placeholder='请选择' width={400} options={[{label:'选项1',value:1},
{label:'选项2',value:2},
{label:'选项3',value:3},
{label:'选项4',value:4},
{label:'选项5',value:5},
{label:'选项6',value:6}]} 
onChange={console.log}/>

</Playground>

## SelectInput

<Playground>

<SelectInput select={{width:100,defaultValue:1, options:[{label:'选项1',value:1},
                              {label:'选项2',value:2},
                              {label:'选项3',value:3},
                              {label:'选项4',value:4},
                              {label:'选项5',value:5},
                              {label:'选项6',value:6}],onChange:console.log}} input={{}}/>

</Playground>

## API

<Props of={SelectAPI}/>