2017-05-18 21:21:33 +03:00
|
|
|
|
```
|
2017-10-31 12:03:44 +02:00
|
|
|
|
const React = require('react');
|
|
|
|
|
const { default: FormGroup } = require('./group');
|
|
|
|
|
const { default: Label } = require('./label');
|
2017-05-18 21:21:33 +03:00
|
|
|
|
|
2017-10-23 17:09:49 +03:00
|
|
|
|
<FormGroup name="test">
|
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
|
|
|
|
|
|
|
|
|
```
|
2017-10-31 12:03:44 +02:00
|
|
|
|
const React = require('react');
|
|
|
|
|
const { default: FormMeta } = require('./meta');
|
|
|
|
|
const { default: FormGroup } = require('./group');
|
|
|
|
|
const { default: Label } = require('./label');
|
2017-05-18 21:21:33 +03:00
|
|
|
|
|
|
|
|
|
<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>
|
|
|
|
|
```
|