zent/src/select/demos/4.multiple.md

一套前端设计语言和基于React的实现

---
order: 4
zh-CN:
	title: 多选
	placeholder: 选择一项
en-US:
	title: Multiple
	placeholder: Select an option..
---

```js
import { useState } from 'react';
import { Select } from 'zent';

const options = [
	{
		key: '1',
		text: 'Option 1',
	},
	{
		key: '2',
		text: 'Option 2',
	},
	{
		key: '3',
		text: 'Option 3',
	},
	{
		key: '4',
		text: 'Option 4',
	},
];

function Multiple() {
	const [value, onChange] = useState([]);
	return (
		<div className="zent-demo-select-multiple">
			<Select
				multiple
				options={options}
				placeholder="{i18n.placeholder}"
				clearable
				creatable
			/>
			<Select
				multiple
				options={options}
				placeholder="{i18n.placeholder}"
				value={value}
				onChange={onChange}
				collapsable
				collapseAt={1}
				clearable
			/>
			<div className="zent-demo-select-multiple-values">
				{value.map((it, index) => (
					<span key={index}>{it.text}</span>
				))}
			</div>
		</div>
	);
}

ReactDOM.render(<Multiple />, mountNode);
```

<style>
	.zent-demo-select-multiple {
		&-values {
			> span:not(:last-child) {
				&:after {
					content: ', ';
				}
			}
		}

		> * {
			margin-bottom: 10px;
		}
	}
</style>