---
order: 1
zh-CN:
  title: 基本用法
en-US:
  title: Basic Usage
---

```js
import {
	AutoComplete,
	Disabled,
	Button,
	Link,
	MenuCascader,
	TabsCascader,
	Checkbox,
	Collapse,
	Input,
	NumberInput,
	Radio,
	Rate,
	Select,
	Slider,
	Switch,
	SplitButton,
	ColorPicker,
} from 'zent';

ReactDOM.render(
	<div className="disabled-component-demo">
		<Disabled>
			<AutoComplete />
			<Button type="primary">Disabled</Button>
			<Link href="https://www.youzan.com/" target="_blank">
				www.youzan.com
			</Link>
			<Checkbox>Checkbox</Checkbox>
			<Input />
			<Input type="textarea" />
			<NumberInput />
			<Radio.Group>
				<Radio value="A">A</Radio>
				<Radio value="B">B</Radio>
				<Radio.Button value="C">C</Radio.Button>
			</Radio.Group>
			<Rate />
			<Select options={[]} />
			<MenuCascader />
			<TabsCascader />
			<Slider />
			<Switch />
			<SplitButton>SplitButton</SplitButton>
			<Collapse>
				<Collapse.Panel title="Collapse 1" key="1">
					Collapse 1
				</Collapse.Panel>
				<Collapse.Panel title="Collapse 1" key="2">
					Collapse 2
				</Collapse.Panel>
				<Collapse.Panel title="Collapse 1" key="3" disabled>
					Collapse 3
				</Collapse.Panel>
			</Collapse>
			<ColorPicker color="#5197FF" />
		</Disabled>
		<Button type="primary">Not Disabled</Button>
	</div>,
	mountNode
);
```

<style>
.disabled-component-demo {
	display: inline-flex;
	flex-direction: column;
}

.disabled-component-demo > * {
	margin-bottom: 10px;
}
</style>