joyent-portal/packages/ui-toolkit/src/form/usage-select.md

103 lines
2.5 KiB
Markdown
Raw Normal View History

```jsx
const React = require('react');
const { default: Select } = require('./select');
const { default: FormGroup } = require('./group');
<FormGroup>
<Select>
<option selected disabled>
Select a datacenter
</option>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
</FormGroup>
```
#### Select > Disabled
```jsx
const React = require('react');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { default: Select } = require('./select');
<FormGroup>
<Label disabled>Your location</Label>
<Select disabled>
2017-10-12 21:15:51 +03:00
<option selected disabled>
Select Location
</option>
<option value="1">Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
2017-10-12 21:15:51 +03:00
</FormGroup>;
```
#### Select > Warning
```jsx
const React = require('react');
const { default: FormMeta } = require('./meta');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { default: Select } = require('./select');
<FormGroup>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
2017-10-12 21:15:51 +03:00
<FormMeta warning>Unexpected children warning!</FormMeta>
</FormGroup>;
```
#### Select > Error
```jsx
const React = require('react');
const { default: FormMeta } = require('./meta');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { default: Select } = require('./select');
<FormGroup>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
2017-10-12 21:15:51 +03:00
<FormMeta error>Unexpected children error!</FormMeta>
</FormGroup>;
```
#### Select > Success
```jsx
const React = require('react');
const { default: FormMeta } = require('./meta');
const { default: FormGroup } = require('./group');
const { default: Label } = require('./label');
const { default: Select } = require('./select');
<FormGroup>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
2017-10-12 21:15:51 +03:00
<FormMeta success>Unexpected children success!</FormMeta>
</FormGroup>;
```