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>