Skip to content

Commit 4d77d28

Browse files
TheSharpieOneTheSharpieOne
committed
feat(form): add forms and form element components
1 parent 257f378 commit 4d77d28

26 files changed

Lines changed: 1304 additions & 1 deletion

‎docs/lib/Components/FormPage.jsx‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
2+
import React from 'react';
3+
import { PrismCode } from 'react-prism';
4+
import Helmet from 'react-helmet';
5+
6+
import FormExample from '../examples/Form';
7+
const FormExampleSource = require('!!raw!../examples/Form.jsx');
8+
9+
import FormGridExample from '../examples/FormGrid';
10+
const FormGridExampleSource = require('!!raw!../examples/FormGrid.jsx');
11+
12+
import FormInlineExample from '../examples/FormInline';
13+
const FormInlineExampleSource = require('!!raw!../examples/FormInline.jsx');
14+
15+
import FormFeedbackExample from '../examples/FormFeedback';
16+
const FormFeedbackExampleSource = require('!!raw!../examples/FormFeedback.jsx');
17+
18+
import InputTypeExample from '../examples/InputType';
19+
const InputTypeExampleSource = require('!!raw!../examples/InputType.jsx');
20+
21+
import InputSizingExample from '../examples/InputSizing';
22+
const InputSizingExampleSource = require('!!raw!../examples/InputSizing.jsx');
23+
24+
import InputGridSizingExample from '../examples/InputGridSizing';
25+
const InputGridSizingExampleSource = require('!!raw!../examples/InputGridSizing.jsx');
26+
27+
import LabelHiddenExample from '../examples/LabelHidden';
28+
const LabelHiddenExampleSource = require('!!raw!../examples/LabelHidden.jsx');
29+
30+
export default class FormPage extends React.Component {
31+
render() {
32+
return (
33+
<div>
34+
<Helmet title="Form" />
35+
<h3>Form</h3>
36+
<div className="docs-example">
37+
<FormExample />
38+
</div>
39+
<pre>
40+
<PrismCode className="language-jsx">
41+
{FormExampleSource}
42+
</PrismCode>
43+
</pre>
44+
45+
<h3>Form Grid</h3>
46+
<div className="docs-example">
47+
<FormGridExample />
48+
</div>
49+
<pre>
50+
<PrismCode className="language-jsx">
51+
{FormGridExampleSource}
52+
</PrismCode>
53+
</pre>
54+
55+
<h3>Inline Form</h3>
56+
<div className="docs-example">
57+
<FormInlineExample />
58+
</div>
59+
<pre>
60+
<PrismCode className="language-jsx">
61+
{FormInlineExampleSource}
62+
</PrismCode>
63+
</pre>
64+
65+
<h3>Form Feedback</h3>
66+
<div className="docs-example">
67+
<FormFeedbackExample />
68+
</div>
69+
<pre>
70+
<PrismCode className="language-jsx">
71+
{FormFeedbackExampleSource}
72+
</PrismCode>
73+
</pre>
74+
75+
<h3>Input Types</h3>
76+
<div className="docs-example">
77+
<InputTypeExample />
78+
</div>
79+
<pre>
80+
<PrismCode className="language-jsx">
81+
{InputTypeExampleSource}
82+
</PrismCode>
83+
</pre>
84+
85+
<h3>Input Sizing</h3>
86+
<div className="docs-example">
87+
<InputSizingExample />
88+
</div>
89+
<pre>
90+
<PrismCode className="language-jsx">
91+
{InputSizingExampleSource}
92+
</PrismCode>
93+
</pre>
94+
95+
<h3>Input Grid Sizing</h3>
96+
<div className="docs-example">
97+
<InputGridSizingExample />
98+
</div>
99+
<pre>
100+
<PrismCode className="language-jsx">
101+
{InputGridSizingExampleSource}
102+
</PrismCode>
103+
</pre>
104+
105+
<h3>Hidden Labels</h3>
106+
<div className="docs-example">
107+
<LabelHiddenExample />
108+
</div>
109+
<pre>
110+
<PrismCode className="language-jsx">
111+
{LabelHiddenExampleSource}
112+
</PrismCode>
113+
</pre>
114+
</div>
115+
);
116+
}
117+
}

‎docs/lib/Components/index.jsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,10 @@ class Components extends React.Component {
3535
name: 'Dropdowns',
3636
to: '/components/dropdowns/'
3737
},
38+
{
39+
name: 'Form',
40+
to: '/components/form/'
41+
},
3842
{
3943
name: 'Tags',
4044
to: '/components/tags/'

‎docs/lib/examples/Form.jsx‎

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

‎docs/lib/examples/FormFeedback.jsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import React from 'react';
2+
import { Form, FormGroup, Label, Input, FormFeedback, FormText } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<Form>
8+
<FormGroup color="success">
9+
<Label for="exampleEmail">Input with success</Label>
10+
<Input state="success" />
11+
<FormFeedback>Success! You did it!</FormFeedback>
12+
<FormText color="muted">Example help text that remains unchanged.</FormText>
13+
</FormGroup>
14+
<FormGroup color="warning">
15+
<Label for="examplePassword">Input with warning</Label>
16+
<Input state="warning" />
17+
<FormFeedback>Whoops, check your formatting and try again.</FormFeedback>
18+
<FormText color="muted">Example help text that remains unchanged.</FormText>
19+
</FormGroup>
20+
<FormGroup color="danger">
21+
<Label for="examplePassword">Input with danger</Label>
22+
<Input state="danger" />
23+
<FormFeedback>Oh noes! that name is already taken</FormFeedback>
24+
<FormText color="muted">Example help text that remains unchanged.</FormText>
25+
</FormGroup>
26+
</Form>
27+
);
28+
}
29+
}

‎docs/lib/examples/FormGrid.jsx‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
import React from 'react';
2+
import { Col, Button, Form, FormGroup, Label, Input, FormText } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<Form>
8+
<FormGroup row>
9+
<Label for="exampleEmail" sm={2}>Email</Label>
10+
<Col sm={10}>
11+
<Input type="email" name="email" id="exampleEmail" placeholder="with a placeholder" />
12+
</Col>
13+
</FormGroup>
14+
<FormGroup row>
15+
<Label for="examplePassword" sm={2}>Password</Label>
16+
<Col sm={10}>
17+
<Input type="password" name="password" id="examplePassword" placeholder="password placeholder" />
18+
</Col>
19+
</FormGroup>
20+
<FormGroup row>
21+
<Label for="exampleSelect" sm={2}>Select</Label>
22+
<Col sm={10}>
23+
<Input type="select" name="select" id="exampleSelect" />
24+
</Col>
25+
</FormGroup>
26+
<FormGroup row>
27+
<Label for="exampleSelectMulti" sm={2}>Select Multiple</Label>
28+
<Col sm={10}>
29+
<Input type="select" name="selectMulti" id="exampleSelectMulti" multiple />
30+
</Col>
31+
</FormGroup>
32+
<FormGroup row>
33+
<Label for="exampleText" sm={2}>Text Area</Label>
34+
<Col sm={10}>
35+
<Input type="textarea" name="text" id="exampleText" />
36+
</Col>
37+
</FormGroup>
38+
<FormGroup row>
39+
<Label for="exampleFile" sm={2}>File</Label>
40+
<Col sm={10}>
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+
</Col>
47+
</FormGroup>
48+
<FormGroup tag="fieldset" row>
49+
<legend className="col-form-legend col-sm-2">Radio Buttons</legend>
50+
<Col sm={10}>
51+
<FormGroup check>
52+
<Label check>
53+
<Input type="radio" name="radio2" />{' '}
54+
Option one is this and that—be sure to include why it's great
55+
</Label>
56+
</FormGroup>
57+
<FormGroup check>
58+
<Label check>
59+
<Input type="radio" name="radio2" />{' '}
60+
Option two can be something else and selecting it will deselect option one
61+
</Label>
62+
</FormGroup>
63+
<FormGroup check disabled>
64+
<Label check>
65+
<Input type="radio" name="radio2" disabled />{' '}
66+
Option three is disabled
67+
</Label>
68+
</FormGroup>
69+
</Col>
70+
</FormGroup>
71+
<FormGroup row>
72+
<Label for="checkbox2" sm={2}>Checkbox</Label>
73+
<Col sm={{ size: 10 }}>
74+
<FormGroup check>
75+
<Label check>
76+
<Input type="checkbox" id="checkbox2" />{' '}
77+
Check me out
78+
</Label>
79+
</FormGroup>
80+
</Col>
81+
</FormGroup>
82+
<FormGroup check row>
83+
<Col sm={{ size: 10, offset: 2 }}>
84+
<Button>Submit</Button>
85+
</Col>
86+
</FormGroup>
87+
</Form>
88+
);
89+
}
90+
}

‎docs/lib/examples/FormInline.jsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
import React from 'react';
2+
import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<Form inline>
8+
<FormGroup>
9+
<Label for="exampleEmail">Email</Label>{' '}
10+
<Input type="email" name="email" id="exampleEmail" placeholder="[email protected]" />
11+
</FormGroup>
12+
{' '}
13+
<FormGroup>
14+
<Label for="examplePassword">Password</Label>{' '}
15+
<Input type="password" name="password" id="examplePassword" placeholder="don't tell!" />
16+
</FormGroup>
17+
{' '}
18+
<Button>Submit</Button>
19+
</Form>
20+
);
21+
}
22+
}

‎docs/lib/examples/InputGridSizing.jsx‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
import React from 'react';
2+
import { Col, Form, FormGroup, Label, Input } from 'reactstrap';
3+
4+
export default class Example extends React.Component {
5+
render() {
6+
return (
7+
<Form>
8+
<FormGroup row>
9+
<Label for="exampleEmail" sm={2} size="lg">Email</Label>
10+
<Col sm={10}>
11+
<Input type="email" name="email" id="exampleEmail" placeholder="lg" size="lg" />
12+
</Col>
13+
</FormGroup>
14+
<FormGroup row>
15+
<Label for="exampleEmail2" sm={2}>Email</Label>
16+
<Col sm={10}>
17+
<Input type="email" name="email" id="exampleEmail2" placeholder="default" />
18+
</Col>
19+
</FormGroup>
20+
</Form>
21+
);
22+
}
23+
}

0 commit comments

Comments
 (0)