2017-05-18 21:21:33 +03:00
|
|
|
|
```
|
|
|
|
|
const FormGroup = require('./group').default;
|
|
|
|
|
const Label = require('./label').default;
|
|
|
|
|
|
|
|
|
|
<FormGroup>
|
2017-10-09 16:35:52 +03:00
|
|
|
|
<Checkbox checked>
|
|
|
|
|
<Label>Detailed explanations</Label>
|
|
|
|
|
</Checkbox>
|
|
|
|
|
<Checkbox checked>
|
|
|
|
|
<Label>Tips and tricks</Label>
|
|
|
|
|
</Checkbox>
|
|
|
|
|
<Checkbox>
|
|
|
|
|
<Label>Hints</Label>
|
|
|
|
|
</Checkbox>
|
|
|
|
|
<Checkbox disabled>
|
|
|
|
|
<Label>How to</Label>
|
|
|
|
|
</Checkbox>
|
2017-05-18 21:21:33 +03:00
|
|
|
|
</FormGroup>
|
|
|
|
|
```
|
|
|
|
|
|
2017-10-09 16:35:52 +03:00
|
|
|
|
#### Checkbox input validation
|
2017-05-18 21:21:33 +03:00
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
const FormMeta = require('./meta').default;
|
|
|
|
|
const FormGroup = require('./group').default;
|
|
|
|
|
const Label = require('./label').default;
|
|
|
|
|
|
|
|
|
|
<div>
|
2017-10-09 16:35:52 +03:00
|
|
|
|
<FormGroup>
|
|
|
|
|
<Checkbox checked success>
|
|
|
|
|
<Label>Check this out!</Label>
|
|
|
|
|
<FormMeta left success>
|
|
|
|
|
Everything looks great
|
|
|
|
|
</FormMeta>
|
|
|
|
|
</Checkbox>
|
2017-05-18 21:21:33 +03:00
|
|
|
|
</FormGroup>
|
|
|
|
|
<FormGroup>
|
2017-10-09 16:35:52 +03:00
|
|
|
|
<Checkbox checked warning>
|
|
|
|
|
<Label>Check this out!</Label>
|
2017-05-18 21:21:33 +03:00
|
|
|
|
<FormMeta left warning>
|
2017-10-09 16:35:52 +03:00
|
|
|
|
Are you sure ?
|
2017-05-18 21:21:33 +03:00
|
|
|
|
</FormMeta>
|
2017-10-09 16:35:52 +03:00
|
|
|
|
</Checkbox>
|
2017-05-18 21:21:33 +03:00
|
|
|
|
</FormGroup>
|
|
|
|
|
<FormGroup>
|
2017-10-09 16:35:52 +03:00
|
|
|
|
<Checkbox error checked>
|
|
|
|
|
<Label>Check this out!</Label>
|
2017-05-18 21:21:33 +03:00
|
|
|
|
<FormMeta left error>
|
2017-10-09 16:35:52 +03:00
|
|
|
|
Something’s missing
|
2017-05-18 21:21:33 +03:00
|
|
|
|
</FormMeta>
|
2017-10-09 16:35:52 +03:00
|
|
|
|
</Checkbox>
|
2017-05-18 21:21:33 +03:00
|
|
|
|
</FormGroup>
|
|
|
|
|
</div>
|
|
|
|
|
```
|