/
InputType.js
151 lines (149 loc) · 4.22 KB
/
InputType.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
import React from 'react';
import { Form, FormGroup, Label, Input, FormText } from 'reactstrap';
const Example = (props) => {
return (
<Form>
<FormGroup>
<Label for="exampleEmail">Plain Text (Static)</Label>
<Input plaintext value="Some plain text/ static value" />
</FormGroup>
<FormGroup>
<Label for="exampleEmail">Email</Label>
<Input
type="email"
name="email"
id="exampleEmail"
placeholder="with a placeholder"
/>
</FormGroup>
<FormGroup>
<Label for="examplePassword">Password</Label>
<Input
type="password"
name="password"
id="examplePassword"
placeholder="password placeholder"
/>
</FormGroup>
<FormGroup>
<Label for="exampleUrl">Url</Label>
<Input
type="url"
name="url"
id="exampleUrl"
placeholder="url placeholder"
/>
</FormGroup>
<FormGroup>
<Label for="exampleNumber">Number</Label>
<Input
type="number"
name="number"
id="exampleNumber"
placeholder="number placeholder"
/>
</FormGroup>
<FormGroup>
<Label for="exampleDatetime">Datetime</Label>
<Input
type="datetime"
name="datetime"
id="exampleDatetime"
placeholder="datetime placeholder"
/>
</FormGroup>
<FormGroup>
<Label for="exampleDate">Date</Label>
<Input
type="date"
name="date"
id="exampleDate"
placeholder="date placeholder"
/>
</FormGroup>
<FormGroup>
<Label for="exampleTime">Time</Label>
<Input
type="time"
name="time"
id="exampleTime"
placeholder="time placeholder"
/>
</FormGroup>
<FormGroup>
<Label for="exampleColor">Color</Label>
<Input
type="color"
name="color"
id="exampleColor"
placeholder="color placeholder"
/>
</FormGroup>
<FormGroup>
<Label for="exampleSearch">Search</Label>
<Input
type="search"
name="search"
id="exampleSearch"
placeholder="search placeholder"
/>
</FormGroup>
<FormGroup>
<Label for="exampleSelect">Select</Label>
<Input type="select" name="select" id="exampleSelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="exampleSelectMulti">Select Multiple</Label>
<Input
type="select"
name="selectMulti"
id="exampleSelectMulti"
multiple
>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
</Input>
</FormGroup>
<FormGroup>
<Label for="exampleText">Text Area</Label>
<Input type="textarea" name="text" id="exampleText" />
</FormGroup>
<FormGroup>
<Label for="exampleFile">File</Label>
<Input type="file" name="file" id="exampleFile" />
<FormText color="muted">
This is some placeholder block-level help text for the above input.
It's a bit lighter and easily wraps to a new line.
</FormText>
</FormGroup>
<FormGroup>
<Label for="exampleRange">Range</Label>
<Input type="range" name="range" id="exampleRange" />
</FormGroup>
<FormGroup check>
<Input id="InputType-radio" type="radio" />
<Label check for="InputType-radio">
Option one is this and that—be sure to include why it's great
</Label>
</FormGroup>
<FormGroup check>
<Input id="InputType-checkbox" type="checkbox" />
<Label for="InputType-checkbox" check>Check me out</Label>
</FormGroup>
<FormGroup switch>
<Input id="InputType-switch" type="switch" />
<Label for="InputType-switch" check>Check me out</Label>
</FormGroup>
</Form>
);
}
export default Example;