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

86 lines
2.1 KiB
Markdown
Raw Normal View History

```jsx
const { RadioList } = require('./radio');
const FormGroup = require('./group').default;
const Label = require('./label').default;
const Legend = require('./legend').default;
2017-10-12 21:15:51 +03:00
<FormGroup name="who-killed">
<Legend>Who killed the radio star?</Legend>
<RadioList>
2017-10-12 21:15:51 +03:00
<Radio name="one" value="video" checked>
<Label>Video</Label>
</Radio>
2017-10-12 21:15:51 +03:00
<Radio name="one" value="tv">
<Label>TV</Label>
</Radio>
2017-10-12 21:15:51 +03:00
<Radio disabled name="one" value="netflix">
<Label>Netflix</Label>
</Radio>
</RadioList>
2017-10-12 21:15:51 +03:00
</FormGroup>;
```
#### Radio input validation
```jsx
const { RadioList } = require('./radio');
const FormGroup = require('./group').default;
const Legend = require('./legend').default;
const FormMeta = require('./meta').default;
const Label = require('./label').default;
<div>
2017-10-12 21:15:51 +03:00
<FormGroup name="who-killed">
<Legend>Who killed the radio star?</Legend>
<RadioList>
2017-10-12 21:15:51 +03:00
<Radio name="two" success value="video">
<Label>Video</Label>
</Radio>
<Radio name="two" success checked value="tv">
TV
</Radio>
<Radio name="two" success value="netflix">
Netflix
</Radio>
</RadioList>
<FormMeta left success>
You are the best !
</FormMeta>
</FormGroup>
2017-10-12 21:15:51 +03:00
<FormGroup name="who-killed">
<Legend>Who killed the radio star?</Legend>
<RadioList>
2017-10-12 21:15:51 +03:00
<Radio name="three" warning checked value="video">
<Label>Video</Label>
</Radio>
<Radio name="three" warning value="tv">
TV
</Radio>
<Radio name="three" warning value="netflix">
Netflix
</Radio>
</RadioList>
<FormMeta left warning>
Are you sure ?
</FormMeta>
</FormGroup>
2017-10-12 21:15:51 +03:00
<FormGroup name="who-killed">
<Legend>Who killed the radio star?</Legend>
<RadioList>
2017-10-12 21:15:51 +03:00
<Radio name="four" error value="video">
<Label>Video</Label>
</Radio>
<Radio name="four" error value="tv">
TV
</Radio>
<Radio name="four" error value="netflix">
Netflix
</Radio>
</RadioList>
<FormMeta error left>
You need to select one
</FormMeta>
</FormGroup>
2017-10-12 21:15:51 +03:00
</div>;
```