Select
Select component to select value from options.
When To Use#
A dropdown menu for displaying choices - an elegant alternative to the native
<select>element.Utilizing Radio is recommended when there are fewer total options (less than 5).
Examples
Lucy
Lucy
Basic Usage.
import { Select } from 'antd';
const Option = Select.Option;
function handleChange(value) {
console.log(`selected ${value}`);
}
ReactDOM.render(
<div>
<Select defaultValue="lucy" style={{ width: 120 }} onChange={handleChange}>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="disabled" disabled>Disabled</Option>
<Option value="Yiminghe">yiminghe</Option>
</Select>
<Select defaultValue="lucy" style={{ width: 120 }} disabled>
<Option value="lucy">Lucy</Option>
</Select>
</div>,
mountNode);- a10
- c12
Multiple selection, selecting from existing items (scroll the menu).
import { Select } from 'antd';
const Option = Select.Option;
const children = [];
for (let i = 10; i < 36; i++) {
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}
function handleChange(value) {
console.log(`selected ${value}`);
}
ReactDOM.render(
<Select
mode="multiple"
style={{ width: '100%' }}
placeholder="Please select"
defaultValue={['a10', 'c12']}
onChange={handleChange}
>
{children}
</Select>,
mountNode);Tags Mode
Select with tags, transform input to tag (scroll the menu)
import { Select } from 'antd';
const Option = Select.Option;
const children = [];
for (let i = 10; i < 36; i++) {
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}
function handleChange(value) {
console.log(`selected ${value}`);
}
ReactDOM.render(
<Select
mode="tags"
style={{ width: '100%' }}
placeholder="Tags Mode"
onChange={handleChange}
>
{children}
</Select>,
mountNode);Zhejiang
Hangzhou
Coordinating the selection of provinces and cities is a common use case and demonstrates how selection can be coordinated.
Using the Cascader component is strongly recommended instead as it is more flexible and capable.
import { Select } from 'antd';
const Option = Select.Option;
const provinceData = ['Zhejiang', 'Jiangsu'];
const cityData = {
Zhejiang: ['Hangzhou', 'Ningbo', 'Wenzhou'],
Jiangsu: ['Nanjing', 'Suzhou', 'Zhenjiang'],
};
class App extends React.Component {
state = {
cities: cityData[provinceData[0]],
secondCity: cityData[provinceData[0]][0],
}
handleProvinceChange = (value) => {
this.setState({
cities: cityData[value],
secondCity: cityData[value][0],
});
}
onSecondCityChange = (value) => {
this.setState({
secondCity: value,
});
}
render() {
const provinceOptions = provinceData.map(province => <Option key={province}>{province}</Option>);
const cityOptions = this.state.cities.map(city => <Option key={city}>{city}</Option>);
return (
<div>
<Select defaultValue={provinceData[0]} style={{ width: 90 }} onChange={this.handleProvinceChange}>
{provinceOptions}
</Select>
<Select value={this.state.secondCity} style={{ width: 90 }} onChange={this.onSecondCityChange}>
{cityOptions}
</Select>
</div>
);
}
}
ReactDOM.render(<App />, mountNode);Lucy (101)
As a default behavior, the onChange callback can only get the value of the selected item. The labelInValue prop can be used to get the label property of the selected item.
The label of the selected item will be packed as an object for passing to the onChange callback.
import { Select } from 'antd';
const Option = Select.Option;
function handleChange(value) {
console.log(value); // { key: "lucy", label: "Lucy (101)" }
}
ReactDOM.render(
<Select labelInValue defaultValue={{ key: 'lucy' }} style={{ width: 120 }} onChange={handleChange}>
<Option value="jack">Jack (100)</Option>
<Option value="lucy">Lucy (101)</Option>
</Select>,
mountNode);Select users
A complete multiple select sample with remote search, debounce fetch, ajax callback order flow, and loading state.
import { Select, Spin } from 'antd';
import debounce from 'lodash/debounce';
const Option = Select.Option;
class UserRemoteSelect extends React.Component {
constructor(props) {
super(props);
this.lastFetchId = 0;
this.fetchUser = debounce(this.fetchUser, 800);
}
state = {
data: [],
value: [],
fetching: false,
}
fetchUser = (value) => {
console.log('fetching user', value);
this.lastFetchId += 1;
const fetchId = this.lastFetchId;
this.setState({ data: [], fetching: true });
fetch('https://randomuser.me/api/?results=5')
.then(response => response.json())
.then((body) => {
if (fetchId !== this.lastFetchId) { // for fetch callback order
return;
}
const data = body.results.map(user => ({
text: `${user.name.first} ${user.name.last}`,
value: user.login.username,
}));
this.setState({ data, fetching: false });
});
}
handleChange = (value) => {
this.setState({
value,
data: [],
fetching: false,
});
}
render() {
const { fetching, data, value } = this.state;
return (
<Select
mode="multiple"
labelInValue
value={value}
placeholder="Select users"
notFoundContent={fetching ? <Spin size="small" /> : null}
filterOption={false}
onSearch={this.fetchUser}
onChange={this.handleChange}
style={{ width: '100%' }}
>
{data.map(d => <Option key={d.value}>{d.text}</Option>)}
</Select>
);
}
}
ReactDOM.render(<UserRemoteSelect />, mountNode);Select a person
Search the options while expanded.
import { Select } from 'antd';
const Option = Select.Option;
function handleChange(value) {
console.log(`selected ${value}`);
}
function handleBlur() {
console.log('blur');
}
function handleFocus() {
console.log('focus');
}
ReactDOM.render(
<Select
showSearch
style={{ width: 200 }}
placeholder="Select a person"
optionFilterProp="children"
onChange={handleChange}
onFocus={handleFocus}
onBlur={handleBlur}
filterOption={(input, option) => option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0}
>
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
<Option value="tom">Tom</Option>
</Select>,
mountNode);a1
- a10
- c12
- a10
- c12
The height of the input field for the select defaults to 32px. If size is set to large, the height will be 40px, and if set to small, 24px.
import { Select, Radio } from 'antd';
const Option = Select.Option;
const children = [];
for (let i = 10; i < 36; i++) {
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}
function handleChange(value) {
console.log(`Selected: ${value}`);
}
class SelectSizesDemo extends React.Component {
state = {
size: 'default',
};
handleSizeChange = (e) => {
this.setState({ size: e.target.value });
}
render() {
const { size } = this.state;
return (
<div>
<Radio.Group value={size} onChange={this.handleSizeChange}>
<Radio.Button value="large">Large</Radio.Button>
<Radio.Button value="default">Default</Radio.Button>
<Radio.Button value="small">Small</Radio.Button>
</Radio.Group>
<br /><br />
<Select
size={size}
defaultValue="a1"
onChange={handleChange}
style={{ width: 200 }}
>
{children}
</Select>
<br />
<Select
mode="multiple"
size={size}
placeholder="Please select"
defaultValue={['a10', 'c12']}
onChange={handleChange}
style={{ width: '100%' }}
>
{children}
</Select>
<br />
<Select
mode="tags"
size={size}
placeholder="Please select"
defaultValue={['a10', 'c12']}
onChange={handleChange}
style={{ width: '100%' }}
>
{children}
</Select>
</div>
);
}
}
ReactDOM.render(<SelectSizesDemo />, mountNode);.code-box-demo .ant-select {
margin: 0 8px 10px 0;
}
#components-select-demo-search-box .code-box-demo .ant-select {
margin: 0;
}Lucy
Using OptGroup to group the options.
import { Select } from 'antd';
const { Option, OptGroup } = Select;
function handleChange(value) {
console.log(`selected ${value}`);
}
ReactDOM.render(
<Select
defaultValue="lucy"
style={{ width: 200 }}
onChange={handleChange}
>
<OptGroup label="Manager">
<Option value="jack">Jack</Option>
<Option value="lucy">Lucy</Option>
</OptGroup>
<OptGroup label="Engineer">
<Option value="Yiminghe">yiminghe</Option>
</OptGroup>
</Select>,
mountNode);input search text
Search with remote data.
import { Select } from 'antd';
import jsonp from 'fetch-jsonp';
import querystring from 'querystring';
const Option = Select.Option;
let timeout;
let currentValue;
function fetch(value, callback) {
if (timeout) {
clearTimeout(timeout);
timeout = null;
}
currentValue = value;
function fake() {
const str = querystring.encode({
code: 'utf-8',
q: value,
});
jsonp(`https://suggest.taobao.com/sug?${str}`)
.then(response => response.json())
.then((d) => {
if (currentValue === value) {
const result = d.result;
const data = [];
result.forEach((r) => {
data.push({
value: r[0],
text: r[0],
});
});
callback(data);
}
});
}
timeout = setTimeout(fake, 300);
}
class SearchInput extends React.Component {
state = {
data: [],
value: undefined,
}
handleSearch = (value) => {
fetch(value, data => this.setState({ data }));
}
handleChange = (value) => {
this.setState({ value });
}
render() {
const options = this.state.data.map(d => <Option key={d.value}>{d.text}</Option>);
return (
<Select
showSearch
value={this.state.value}
placeholder={this.props.placeholder}
style={this.props.style}
defaultActiveFirstOption={false}
showArrow={false}
filterOption={false}
onSearch={this.handleSearch}
onChange={this.handleChange}
notFoundContent={null}
>
{options}
</Select>
);
}
}
ReactDOM.render(
<SearchInput placeholder="input search text" style={{ width: 200 }} />,
mountNode);Try to copy Lucy,Jack to the input. Only available in tags and multiple mode.
import { Select } from 'antd';
const Option = Select.Option;
const children = [];
for (let i = 10; i < 36; i++) {
children.push(<Option key={i.toString(36) + i}>{i.toString(36) + i}</Option>);
}
function handleChange(value) {
console.log(`selected ${value}`);
}
ReactDOM.render(
<Select
mode="tags"
style={{ width: '100%' }}
onChange={handleChange}
tokenSeparators={[',']}
>
{children}
</Select>,
mountNode);API#
<Select>
<Option value="lucy">lucy</Option>
</Select>Select props#
| Property | Description | Type | Default |
|---|---|---|---|
| allowClear | Show clear button. | boolean | false |
| autoFocus | Get focus by default | boolean | false |
| defaultActiveFirstOption | Whether active first option by default | boolean | true |
| defaultValue | Initial selected option. | string|string[] number|number[] | - |
| disabled | Whether disabled select | boolean | false |
| dropdownClassName | className of dropdown menu | string | - |
| dropdownMatchSelectWidth | Whether dropdown's width is same with select. | boolean | true |
| dropdownStyle | style of dropdown menu | object | - |
| filterOption | If true, filter options by input, if function, filter options against it. The function will receive two arguments, inputValue and option, if the function returns true, the option will be included in the filtered set; Otherwise, it will be excluded. | boolean or function(inputValue, option) | true |
| firstActiveValue | Value of action option by default | string|string[] | - |
| getPopupContainer | Parent Node which the selector should be rendered to. Default to body. When position issues happen, try to modify it into scrollable content and position it relative. Example | function(triggerNode) | () => document.body |
| labelInValue | whether to embed label in value, turn the format of value from string to {key: string, label: ReactNode} | boolean | false |
| maxTagCount | Max tag count to show | number | - |
| maxTagPlaceholder | Placeholder for not showing tags | ReactNode/function(omittedValues) | - |
| mode | Set mode of Select (Support after 2.9) | 'default' | 'multiple' | 'tags' | 'default' |
| notFoundContent | Specify content to show when no result matches.. | string | 'Not Found' |
| optionFilterProp | Which prop value of option will be used for filter if filterOption is true | string | value |
| optionLabelProp | Which prop value of option will render as content of select. | string | value for combobox, children for other modes |
| placeholder | Placeholder of select | string|ReactNode | - |
| showArrow | Whether to show the drop-down arrow | boolean | true |
| showSearch | Whether show search input in single mode. | boolean | false |
| size | Size of Select input. default large small | string | default |
| tokenSeparators | Separator used to tokenize on tag/multiple mode | string[] | |
| value | Current selected option. | string|number|string[]|number[] | - |
| onBlur | Called when blur | function | - |
| onChange | Called when select an option or input value change, or value of input is changed in combobox mode | function(value, option:Option/Array<Option>) | - |
| onDeselect | Called when a option is deselected, the params are option's value (or key) . only called for multiple or tags, effective in multiple or tags mode only. | function(value, option:Option) | - |
| onFocus | Called when focus | function | - |
| onInputKeyDown | Called when key pressed | function | - |
| onMouseEnter | Called when mouse enter | function | - |
| onMouseLeave | Called when mouse leave | function | - |
| onPopupScroll | Called when dropdown scrolls | function | - |
| onSearch | Callback function that is fired when input changed. | function(value: string) | |
| onSelect | Called when a option is selected, the params are option's value (or key) and option instance. | function(value, option:Option) | - |
Select Methods#
| Name | Description |
|---|---|
| blur() | Remove focus |
| focus() | Get focus |
Option props#
| Property | Description | Type | Default |
|---|---|---|---|
| disabled | Disable this option | boolean | false |
| key | Same usage as value. If React request you to set this property, you can set it to value of option, and then omit value property. | string | |
| title | title of Select after select this Option | string | - |
| value | default to filter with this property | string|number | - |
OptGroup props#
| Property | Description | Type | Default |
|---|---|---|---|
| key | string | - | |
| label | Group label | string|React.Element | - |