1
0
mirror of https://github.com/yldio/copilot.git synced 2024-12-24 02:40:05 +02:00
copilot/packages/ui-toolkit/src/form/usage-select.md
Sérgio Ramos 8295bd6882 chore: initial lerna setup
this shall be a progressive process
2017-05-25 10:56:50 +01:00

260 lines
6.2 KiB
Markdown

```
const FormGroup = require('./group').default;
const Label = require('./label').default;
<FormGroup>
<Label>Your location</Label>
<Select placeholder='Select Location'>
<option value='1'>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
</FormGroup>
```
#### placeholder
```
<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>
```
#### `disabled`
```
const FormGroup = require('./group').default;
const Label = require('./label').default;
<FormGroup>
<Label>Your location</Label>
<Select disabled>
<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>
</FormGroup>
```
#### selected
```
const FormGroup = require('./group').default;
const Label = require('./label').default;
<FormGroup>
<Label>Your location</Label>
<Select>
<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>
</FormGroup>
```
#### multiple
```
const FormGroup = require('./group').default;
const Label = require('./label').default;
<FormGroup>
<Label>Your location</Label>
<Select multiple>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
</FormGroup>
```
#### warning
```
const FormMeta = require('./meta').default;
const FormGroup = require('./group').default;
const Label = require('./label').default;
<div>
<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>
<FormMeta warning='Unexpected inline warning!' />
</FormGroup>
<FormGroup warning='Unexpected group warning!'>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta />
</FormGroup>
<FormGroup meta={{warning: 'Unexpected meta warning!'}}>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta />
</FormGroup>
<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>
<FormMeta warning>
Unexpected children warning!
</FormMeta>
</FormGroup>
</div>
```
#### error
```
const FormMeta = require('./meta').default;
const FormGroup = require('./group').default;
const Label = require('./label').default;
<div>
<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>
<FormMeta error='Unexpected inline error!' />
</FormGroup>
<FormGroup error='Unexpected group error!'>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta />
</FormGroup>
<FormGroup meta={{error: 'Unexpected meta error!'}}>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta />
</FormGroup>
<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>
<FormMeta error>
Unexpected children error!
</FormMeta>
</FormGroup>
</div>
```
#### success
```
const FormMeta = require('./meta').default;
const FormGroup = require('./group').default;
const Label = require('./label').default;
<div>
<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>
<FormMeta success='Unexpected inline success!' />
</FormGroup>
<FormGroup success='Unexpected group success!'>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta />
</FormGroup>
<FormGroup meta={{success: 'Unexpected meta success!'}}>
<Label>Your location</Label>
<Select>
<option>Amsterdam, EU</option>
<option>San Francisco, USA</option>
<option>Seoul, South Korea</option>
<option>Tokyo, Japan</option>
</Select>
<FormMeta />
</FormGroup>
<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>
<FormMeta success>
Unexpected children success!
</FormMeta>
</FormGroup>
</div>
```
#### meta
```
const FormMeta = require('./meta').default;
const FormGroup = require('./group').default;
const Label = require('./label').default;
<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>
<FormMeta>
I&#39;m a children of meta!
</FormMeta>
</FormGroup>
```