coreui-free-react-admin-template

1
import React from 'react'
2
import {
3
  CButton,
4
  CCard,
5
  CCardBody,
6
  CCardHeader,
7
  CCol,
8
  CDropdown,
9
  CDropdownDivider,
10
  CDropdownItem,
11
  CDropdownMenu,
12
  CDropdownToggle,
13
  CFormCheck,
14
  CFormInput,
15
  CFormLabel,
16
  CFormSelect,
17
  CFormTextarea,
18
  CInputGroup,
19
  CInputGroupText,
20
  CRow,
21
} from '@coreui/react'
22
import { DocsExample } from 'src/components'
23

24
const InputGroup = () => {
25
  return (
26
    <CRow>
27
      <CCol xs={12}>
28
        <CCard className="mb-4">
29
          <CCardHeader>
30
            <strong>React Input group</strong> <small>Basic example</small>
31
          </CCardHeader>
32
          <CCardBody>
33
            <p className="text-body-secondary small">
34
              Place one add-on or button on either side of an input. You may also place one on both
35
              sides of an input. Remember to place <code>&lt;CFormLabel&gt;</code>s outside the
36
              input group.
37
            </p>
38
            <DocsExample href="forms/input-group">
39
              <CInputGroup className="mb-3">
40
                <CInputGroupText id="basic-addon1">@</CInputGroupText>
41
                <CFormInput
42
                  placeholder="Username"
43
                  aria-label="Username"
44
                  aria-describedby="basic-addon1"
45
                />
46
              </CInputGroup>
47
              <CInputGroup className="mb-3">
48
                <CFormInput
49
                  placeholder="Recipient&#39;s username"
50
                  aria-label="Recipient&#39;s username"
51
                  aria-describedby="basic-addon2"
52
                />
53
                <CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
54
              </CInputGroup>
55
              <CFormLabel htmlFor="basic-url">Your vanity URL</CFormLabel>
56
              <CInputGroup className="mb-3">
57
                <CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
58
                <CFormInput id="basic-url" aria-describedby="basic-addon3" />
59
              </CInputGroup>
60
              <CInputGroup className="mb-3">
61
                <CInputGroupText>$</CInputGroupText>
62
                <CFormInput aria-label="Amount (to the nearest dollar)" />
63
                <CInputGroupText>.00</CInputGroupText>
64
              </CInputGroup>
65
              <CInputGroup className="mb-3">
66
                <CFormInput placeholder="Username" aria-label="Username" />
67
                <CInputGroupText>@</CInputGroupText>
68
                <CFormInput placeholder="Server" aria-label="Server" />
69
              </CInputGroup>
70
              <CInputGroup>
71
                <CInputGroupText>With textarea</CInputGroupText>
72
                <CFormTextarea aria-label="With textarea"></CFormTextarea>
73
              </CInputGroup>
74
            </DocsExample>
75
          </CCardBody>
76
        </CCard>
77
      </CCol>
78
      <CCol xs={12}>
79
        <CCard className="mb-4">
80
          <CCardHeader>
81
            <strong>React Input group</strong> <small>Wrapping</small>
82
          </CCardHeader>
83
          <CCardBody>
84
            <p className="text-body-secondary small">
85
              Input groups wrap by default via <code>flex-wrap: wrap</code> in order to accommodate
86
              custom form field validation within an input group. You may disable this with{' '}
87
              <code>.flex-nowrap</code>.
88
            </p>
89
            <DocsExample href="forms/input-group#wrapping">
90
              <CInputGroup className="flex-nowrap">
91
                <CInputGroupText id="addon-wrapping">@</CInputGroupText>
92
                <CFormInput
93
                  placeholder="Username"
94
                  aria-label="Username"
95
                  aria-describedby="addon-wrapping"
96
                />
97
              </CInputGroup>
98
            </DocsExample>
99
          </CCardBody>
100
        </CCard>
101
      </CCol>
102
      <CCol xs={12}>
103
        <CCard className="mb-4">
104
          <CCardHeader>
105
            <strong>React Input group</strong> <small>Sizing</small>
106
          </CCardHeader>
107
          <CCardBody>
108
            <p className="text-body-secondary small">
109
              Add the relative form sizing classes to the <code>&lt;CInputGroup&gt;</code> itself
110
              and contents within will automatically resize—no need for repeating the form control
111
              size classes on each element.
112
            </p>
113
            <p className="text-body-secondary small">
114
              <strong>Sizing on the individual input group elements isn&#39;tsupported.</strong>
115
            </p>
116
            <DocsExample href="forms/input-group#sizing">
117
              <CInputGroup size="sm" className="mb-3">
118
                <CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
119
                <CFormInput
120
                  aria-label="Sizing example input"
121
                  aria-describedby="inputGroup-sizing-sm"
122
                />
123
              </CInputGroup>
124
              <CInputGroup className="mb-3">
125
                <CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
126
                <CFormInput
127
                  aria-label="Sizing example input"
128
                  aria-describedby="inputGroup-sizing-default"
129
                />
130
              </CInputGroup>
131
              <CInputGroup size="lg">
132
                <CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
133
                <CFormInput
134
                  aria-label="Sizing example input"
135
                  aria-describedby="inputGroup-sizing-lg"
136
                />
137
              </CInputGroup>
138
            </DocsExample>
139
          </CCardBody>
140
        </CCard>
141
      </CCol>
142
      <CCol xs={12}>
143
        <CCard className="mb-4">
144
          <CCardHeader>
145
            <strong>React Input group</strong> <small>Checkboxes and radios</small>
146
          </CCardHeader>
147
          <CCardBody>
148
            <p className="text-body-secondary small">
149
              Place any checkbox or radio option within an input group&#39;s addon instead of text.
150
            </p>
151
            <DocsExample href="forms/input-group#checkboxes-and-radios">
152
              <CInputGroup className="mb-3">
153
                <CInputGroupText>
154
                  <CFormCheck
155
                    type="checkbox"
156
                    value=""
157
                    aria-label="Checkbox for following text input"
158
                  />
159
                </CInputGroupText>
160
                <CFormInput aria-label="Text input with checkbox" />
161
              </CInputGroup>
162
              <CInputGroup>
163
                <CInputGroupText>
164
                  <CFormCheck
165
                    type="radio"
166
                    value=""
167
                    aria-label="Radio button for following text input"
168
                  />
169
                </CInputGroupText>
170
                <CFormInput aria-label="Text input with radio button" />
171
              </CInputGroup>
172
            </DocsExample>
173
          </CCardBody>
174
        </CCard>
175
      </CCol>
176
      <CCol xs={12}>
177
        <CCard className="mb-4">
178
          <CCardHeader>
179
            <strong>React Input group</strong> <small>Multiple inputs</small>
180
          </CCardHeader>
181
          <CCardBody>
182
            <p className="text-body-secondary small">
183
              While multiple <code>&lt;CFormInput&gt;</code>s are supported visually, validation
184
              styles are only available for input groups with a single{' '}
185
              <code>&lt;CFormInput&gt;</code>.
186
            </p>
187
            <DocsExample href="forms/input-group#multiple-inputs">
188
              <CInputGroup>
189
                <CInputGroupText>First and last name</CInputGroupText>
190
                <CFormInput aria-label="First name" />
191
                <CFormInput aria-label="Last name" />
192
              </CInputGroup>
193
            </DocsExample>
194
          </CCardBody>
195
        </CCard>
196
      </CCol>
197
      <CCol xs={12}>
198
        <CCard className="mb-4">
199
          <CCardHeader>
200
            <strong>React Input group</strong> <small>Multiple addons</small>
201
          </CCardHeader>
202
          <CCardBody>
203
            <p className="text-body-secondary small">
204
              Multiple add-ons are supported and can be mixed with checkbox and radio input
205
              versions..
206
            </p>
207
            <DocsExample href="forms/input-group#multiple-addons">
208
              <CInputGroup className="mb-3">
209
                <CInputGroupText>$</CInputGroupText>
210
                <CInputGroupText>0.00</CInputGroupText>
211
                <CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
212
              </CInputGroup>
213
              <CInputGroup>
214
                <CFormInput aria-label="Dollar amount (with dot and two decimal places)" />
215
                <CInputGroupText>$</CInputGroupText>
216
                <CInputGroupText>0.00</CInputGroupText>
217
              </CInputGroup>
218
            </DocsExample>
219
          </CCardBody>
220
        </CCard>
221
      </CCol>
222
      <CCol xs={12}>
223
        <CCard className="mb-4">
224
          <CCardHeader>
225
            <strong>React Input group</strong> <small>Button addons</small>
226
          </CCardHeader>
227
          <CCardBody>
228
            <p className="text-body-secondary small">
229
              Multiple add-ons are supported and can be mixed with checkbox and radio input
230
              versions..
231
            </p>
232
            <DocsExample href="forms/input-group#button-addons">
233
              <CInputGroup className="mb-3">
234
                <CButton type="button" color="secondary" variant="outline" id="button-addon1">
235
                  Button
236
                </CButton>
237
                <CFormInput
238
                  placeholder=""
239
                  aria-label="Example text with button addon"
240
                  aria-describedby="button-addon1"
241
                />
242
              </CInputGroup>
243
              <CInputGroup className="mb-3">
244
                <CFormInput
245
                  placeholder="Recipient's username"
246
                  aria-label="Recipient's username"
247
                  aria-describedby="button-addon2"
248
                />
249
                <CButton type="button" color="secondary" variant="outline" id="button-addon2">
250
                  Button
251
                </CButton>
252
              </CInputGroup>
253
              <CInputGroup className="mb-3">
254
                <CButton type="button" color="secondary" variant="outline">
255
                  Button
256
                </CButton>
257
                <CButton type="button" color="secondary" variant="outline">
258
                  Button
259
                </CButton>
260
                <CFormInput placeholder="" aria-label="Example text with two button addons" />
261
              </CInputGroup>
262
              <CInputGroup>
263
                <CFormInput
264
                  placeholder="Recipient's username"
265
                  aria-label="Recipient's username with two button addons"
266
                />
267
                <CButton type="button" color="secondary" variant="outline">
268
                  Button
269
                </CButton>
270
                <CButton type="button" color="secondary" variant="outline">
271
                  Button
272
                </CButton>
273
              </CInputGroup>
274
            </DocsExample>
275
          </CCardBody>
276
        </CCard>
277
      </CCol>
278
      <CCol xs={12}>
279
        <CCard className="mb-4">
280
          <CCardHeader>
281
            <strong>React Input group</strong> <small>Buttons with dropdowns</small>
282
          </CCardHeader>
283
          <CCardBody>
284
            <DocsExample href="forms/input-group#buttons-with-dropdowns">
285
              <CInputGroup className="mb-3">
286
                <CDropdown variant="input-group">
287
                  <CDropdownToggle color="secondary" variant="outline">
288
                    Dropdown
289
                  </CDropdownToggle>
290
                  <CDropdownMenu>
291
                    <CDropdownItem href="#">Action</CDropdownItem>
292
                    <CDropdownItem href="#">Another action</CDropdownItem>
293
                    <CDropdownItem href="#">Something else here</CDropdownItem>
294
                    <CDropdownDivider />
295
                    <CDropdownItem href="#">Separated link</CDropdownItem>
296
                  </CDropdownMenu>
297
                </CDropdown>
298
                <CFormInput aria-label="Text input with dropdown button" />
299
              </CInputGroup>
300
              <CInputGroup className="mb-3">
301
                <CFormInput aria-label="Text input with dropdown button" />
302
                <CDropdown alignment="end" variant="input-group">
303
                  <CDropdownToggle color="secondary" variant="outline">
304
                    Dropdown
305
                  </CDropdownToggle>
306
                  <CDropdownMenu>
307
                    <CDropdownItem href="#">Action</CDropdownItem>
308
                    <CDropdownItem href="#">Another action</CDropdownItem>
309
                    <CDropdownItem href="#">Something else here</CDropdownItem>
310
                    <CDropdownDivider />
311
                    <CDropdownItem href="#">Separated link</CDropdownItem>
312
                  </CDropdownMenu>
313
                </CDropdown>
314
              </CInputGroup>
315
              <CInputGroup>
316
                <CDropdown variant="input-group">
317
                  <CDropdownToggle color="secondary" variant="outline">
318
                    Dropdown
319
                  </CDropdownToggle>
320
                  <CDropdownMenu>
321
                    <CDropdownItem href="#">Action</CDropdownItem>
322
                    <CDropdownItem href="#">Another action</CDropdownItem>
323
                    <CDropdownItem href="#">Something else here</CDropdownItem>
324
                    <CDropdownDivider />
325
                    <CDropdownItem href="#">Separated link</CDropdownItem>
326
                  </CDropdownMenu>
327
                </CDropdown>
328
                <CFormInput aria-label="Text input with 2 dropdown buttons" />
329
                <CDropdown alignment="end" variant="input-group">
330
                  <CDropdownToggle color="secondary" variant="outline">
331
                    Dropdown
332
                  </CDropdownToggle>
333
                  <CDropdownMenu>
334
                    <CDropdownItem href="#">Action</CDropdownItem>
335
                    <CDropdownItem href="#">Another action</CDropdownItem>
336
                    <CDropdownItem href="#">Something else here</CDropdownItem>
337
                    <CDropdownDivider />
338
                    <CDropdownItem href="#">Separated link</CDropdownItem>
339
                  </CDropdownMenu>
340
                </CDropdown>
341
              </CInputGroup>
342
            </DocsExample>
343
          </CCardBody>
344
        </CCard>
345
      </CCol>
346
      <CCol xs={12}>
347
        <CCard className="mb-4">
348
          <CCardHeader>
349
            <strong>React Input group</strong> <small>Segmented buttons</small>
350
          </CCardHeader>
351
          <CCardBody>
352
            <DocsExample href="forms/input-group#segmented-buttons">
353
              <CInputGroup className="mb-3">
354
                <CDropdown variant="input-group">
355
                  <CButton type="button" color="secondary" variant="outline">
356
                    Action
357
                  </CButton>
358
                  <CDropdownToggle color="secondary" variant="outline" split />
359
                  <CDropdownMenu>
360
                    <CDropdownItem href="#">Action</CDropdownItem>
361
                    <CDropdownItem href="#">Another action</CDropdownItem>
362
                    <CDropdownItem href="#">Something else here</CDropdownItem>
363
                    <CDropdownDivider />
364
                    <CDropdownItem href="#">Separated link</CDropdownItem>
365
                  </CDropdownMenu>
366
                </CDropdown>
367
                <CFormInput aria-label="Text input with segmented dropdown button" />
368
              </CInputGroup>
369
              <CInputGroup>
370
                <CFormInput aria-label="Text input with segmented dropdown button" />
371
                <CDropdown alignment="end" variant="input-group">
372
                  <CButton type="button" color="secondary" variant="outline">
373
                    Action
374
                  </CButton>
375
                  <CDropdownToggle color="secondary" variant="outline" split />
376
                  <CDropdownMenu>
377
                    <CDropdownItem href="#">Action</CDropdownItem>
378
                    <CDropdownItem href="#">Another action</CDropdownItem>
379
                    <CDropdownItem href="#">Something else here</CDropdownItem>
380
                    <CDropdownDivider />
381
                    <CDropdownItem href="#">Separated link</CDropdownItem>
382
                  </CDropdownMenu>
383
                </CDropdown>
384
              </CInputGroup>
385
            </DocsExample>
386
          </CCardBody>
387
        </CCard>
388
      </CCol>
389
      <CCol xs={12}>
390
        <CCard className="mb-4">
391
          <CCardHeader>
392
            <strong>React Input group</strong> <small>Custom select</small>
393
          </CCardHeader>
394
          <CCardBody>
395
            <DocsExample href="forms/input-group#custom-select">
396
              <CInputGroup className="mb-3">
397
                <CInputGroupText as="label" htmlFor="inputGroupSelect01">
398
                  Options
399
                </CInputGroupText>
400
                <CFormSelect id="inputGroupSelect01">
401
                  <option>Choose...</option>
402
                  <option value="1">One</option>
403
                  <option value="2">Two</option>
404
                  <option value="3">Three</option>
405
                </CFormSelect>
406
              </CInputGroup>
407
              <CInputGroup className="mb-3">
408
                <CFormSelect id="inputGroupSelect02">
409
                  <option>Choose...</option>
410
                  <option value="1">One</option>
411
                  <option value="2">Two</option>
412
                  <option value="3">Three</option>
413
                </CFormSelect>
414
                <CInputGroupText as="label" htmlFor="inputGroupSelect02">
415
                  Options
416
                </CInputGroupText>
417
              </CInputGroup>
418
              <CInputGroup className="mb-3">
419
                <CButton type="button" color="secondary" variant="outline">
420
                  Button
421
                </CButton>
422
                <CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">
423
                  <option>Choose...</option>
424
                  <option value="1">One</option>
425
                  <option value="2">Two</option>
426
                  <option value="3">Three</option>
427
                </CFormSelect>
428
              </CInputGroup>
429
              <CInputGroup>
430
                <CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">
431
                  <option>Choose...</option>
432
                  <option value="1">One</option>
433
                  <option value="2">Two</option>
434
                  <option value="3">Three</option>
435
                </CFormSelect>
436
                <CButton type="button" color="secondary" variant="outline">
437
                  Button
438
                </CButton>
439
              </CInputGroup>
440
            </DocsExample>
441
          </CCardBody>
442
        </CCard>
443
      </CCol>
444
      <CCol xs={12}>
445
        <CCard className="mb-4">
446
          <CCardHeader>
447
            <strong>React Input group</strong> <small>Custom file input</small>
448
          </CCardHeader>
449
          <CCardBody>
450
            <DocsExample href="forms/input-group#custom-file-input">
451
              <CInputGroup className="mb-3">
452
                <CInputGroupText as="label" htmlFor="inputGroupFile01">
453
                  Upload
454
                </CInputGroupText>
455
                <CFormInput type="file" id="inputGroupFile01" />
456
              </CInputGroup>
457
              <CInputGroup className="mb-3">
458
                <CFormInput type="file" id="inputGroupFile02" />
459
                <CInputGroupText as="label" htmlFor="inputGroupFile02">
460
                  Upload
461
                </CInputGroupText>
462
              </CInputGroup>
463
              <CInputGroup className="mb-3">
464
                <CButton
465
                  type="button"
466
                  color="secondary"
467
                  variant="outline"
468
                  id="inputGroupFileAddon03"
469
                >
470
                  Button
471
                </CButton>
472
                <CFormInput
473
                  type="file"
474
                  id="inputGroupFile03"
475
                  aria-describedby="inputGroupFileAddon03"
476
                  aria-label="Upload"
477
                />
478
              </CInputGroup>
479
              <CInputGroup>
480
                <CFormInput
481
                  type="file"
482
                  id="inputGroupFile04"
483
                  aria-describedby="inputGroupFileAddon04"
484
                  aria-label="Upload"
485
                />
486
                <CButton
487
                  type="button"
488
                  color="secondary"
489
                  variant="outline"
490
                  id="inputGroupFileAddon04"
491
                >
492
                  Button
493
                </CButton>
494
              </CInputGroup>
495
            </DocsExample>
496
          </CCardBody>
497
        </CCard>
498
      </CCol>
499
    </CRow>
500
  )
501
}
502

503
export default InputGroup
504