1import React from 'react';
2import { Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';
3
4const Example = (props) => {
5 return (
6 <Form>
7 <FormGroup>
8 <Label for="exampleEmail">Email</Label>
9 <Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" />
10 </FormGroup>
11 <FormGroup>
12 <Label for="examplePassword">Password</Label>
13 <Input type="password" name="password" id="examplePassword" placeholder="password placeholder" />
14 </FormGroup>
15 <FormGroup>
16 <Label for="exampleSelect">Select</Label>
17 <Input type="select" name="select" id="exampleSelect">
18 <option>1</option>
19 <option>2</option>
20 <option>3</option>
21 <option>4</option>
22 <option>5</option>
23 </Input>
24 </FormGroup>
25 <FormGroup>
26 <Label for="exampleSelectMulti">Select Multiple</Label>
27 <Input type="select" name="selectMulti" id="exampleSelectMulti" multiple>
28 <option>1</option>
29 <option>2</option>
30 <option>3</option>
31 <option>4</option>
32 <option>5</option>
33 </Input>
34 </FormGroup>
35 <FormGroup>
36 <Label for="exampleText">Text Area</Label>
37 <Input type="textarea" name="text" id="exampleText" />
38 </FormGroup>
39 <FormGroup>
40 <Label for="exampleFile">File</Label>
41 <Input type="file" name="file" id="exampleFile" />
42 <FormText color="muted">
43 This is some placeholder block-level help text for the above input.
44 It's a bit lighter and easily wraps to a new line.
45 </FormText>
46 </FormGroup>
47 <FormGroup tag="fieldset">
48 <legend>Radio Buttons</legend>
49 <FormGroup check>
50 <Label check>
51 <Input type="radio" name="radio1" />{' '}
52 Option one is this and that—be sure to include why it's great
53 </Label>
54 </FormGroup>
55 <FormGroup check>
56 <Label check>
57 <Input type="radio" name="radio1" />{' '}
58 Option two can be something else and selecting it will deselect option one
59 </Label>
60 </FormGroup>
61 <FormGroup check disabled>
62 <Label check>
63 <Input type="radio" name="radio1" disabled />{' '}
64 Option three is disabled
65 </Label>
66 </FormGroup>
67 </FormGroup>
68 <FormGroup check>
69 <Label check>
70 <Input type="checkbox" />{' '}
71 Check me out
72 </Label>
73 </FormGroup>
74 <Button>Submit</Button>
75 </Form>
76 );
77}
78
79export default Example;
80
1<Dropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
2 <DropdownToggle caret>
3 Dropdown's menu is right-aligned
4 </DropdownToggle>
5 <DropdownMenu right>
6 <DropdownItem header>Header</DropdownItem>
7 <DropdownItem disabled>Action</DropdownItem>
8 <DropdownItem>Another Action</DropdownItem>
9 <DropdownItem divider/>
10 <DropdownItem>Another Really Really Long Action (Really!)</DropdownItem>
11 </DropdownMenu>
12</Dropdown>