coreui-free-react-admin-template

1
import React from 'react'
2
import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CFormSwitch, CRow } from '@coreui/react'
3
import { DocsExample } from 'src/components'
4

5
const ChecksRadios = () => {
6
  return (
7
    <CRow>
8
      <CCol xs={12}>
9
        <CCard className="mb-4">
10
          <CCardHeader>
11
            <strong>React Checkbox</strong>
12
          </CCardHeader>
13
          <CCardBody>
14
            <DocsExample href="forms/checks-radios">
15
              <CFormCheck id="flexCheckDefault" label="Default checkbox" />
16
              <CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
17
            </DocsExample>
18
          </CCardBody>
19
        </CCard>
20
      </CCol>
21
      <CCol xs={12}>
22
        <CCard className="mb-4">
23
          <CCardHeader>
24
            <strong>React Checkbox</strong> <small>Disabled</small>
25
          </CCardHeader>
26
          <CCardBody>
27
            <p className="text-body-secondary small">
28
              Add the <code>disabled</code> attribute and the associated <code>&lt;label&gt;</code>s
29
              are automatically styled to match with a lighter color to help indicate the
30
              input&#39;s state.
31
            </p>
32
            <DocsExample href="forms/checks-radios#disabled">
33
              <CFormCheck label="Disabled checkbox" disabled />
34
              <CFormCheck label="Disabled checked checkbox" defaultChecked disabled />
35
            </DocsExample>
36
          </CCardBody>
37
        </CCard>
38
      </CCol>
39
      <CCol xs={12}>
40
        <CCard className="mb-4">
41
          <CCardHeader>
42
            <strong>React Radio</strong>
43
          </CCardHeader>
44
          <CCardBody>
45
            <p className="text-body-secondary small">
46
              Add the <code>disabled</code> attribute and the associated <code>&lt;label&gt;</code>s
47
              are automatically styled to match with a lighter color to help indicate the
48
              input&#39;s state.
49
            </p>
50
            <DocsExample href="forms/checks-radios#radios">
51
              <CFormCheck
52
                type="radio"
53
                name="flexRadioDefault"
54
                id="flexRadioDefault1"
55
                label="Default radio"
56
              />
57
              <CFormCheck
58
                type="radio"
59
                name="flexRadioDefault"
60
                id="flexRadioDefault2"
61
                label="Checked radio"
62
                defaultChecked
63
              />
64
            </DocsExample>
65
          </CCardBody>
66
        </CCard>
67
      </CCol>
68
      <CCol xs={12}>
69
        <CCard className="mb-4">
70
          <CCardHeader>
71
            <strong>React Radio</strong> <small>Disabled</small>
72
          </CCardHeader>
73
          <CCardBody>
74
            <DocsExample href="forms/checks-radios#disabled-1">
75
              <CFormCheck
76
                type="radio"
77
                name="flexRadioDisabled"
78
                id="flexRadioDisabled"
79
                label="Disabled radio"
80
                disabled
81
              />
82
              <CFormCheck
83
                type="radio"
84
                name="flexRadioDisabled"
85
                id="flexRadioCheckedDisabled"
86
                label="Disabled checked radio"
87
                defaultChecked
88
                disabled
89
              />
90
            </DocsExample>
91
          </CCardBody>
92
        </CCard>
93
      </CCol>
94
      <CCol xs={12}>
95
        <CCard className="mb-4">
96
          <CCardHeader>
97
            <strong>React Switches</strong>
98
          </CCardHeader>
99
          <CCardBody>
100
            <p className="text-body-secondary small">
101
              A switch has the markup of a custom checkbox but uses the <code>switch</code> boolean
102
              properly to render a toggle switch. Switches also support the <code>disabled</code>{' '}
103
              attribute.
104
            </p>
105
            <DocsExample href="forms/checks-radios#switches">
106
              <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
107
              <CFormSwitch
108
                label="Checked switch checkbox input"
109
                id="formSwitchCheckChecked"
110
                defaultChecked
111
              />
112
              <CFormSwitch
113
                label="Disabled switch checkbox input"
114
                id="formSwitchCheckDisabled"
115
                disabled
116
              />
117
              <CFormSwitch
118
                label="Disabled checked switch checkbox input"
119
                id="formSwitchCheckCheckedDisabled"
120
                defaultChecked
121
                disabled
122
              />
123
            </DocsExample>
124
          </CCardBody>
125
        </CCard>
126
      </CCol>
127
      <CCol xs={12}>
128
        <CCard className="mb-4">
129
          <CCardHeader>
130
            <strong>React Switches</strong> <small>Sizes</small>
131
          </CCardHeader>
132
          <CCardBody>
133
            <DocsExample href="forms/checks-radios#sizes">
134
              <CFormSwitch label="Default switch checkbox input" id="formSwitchCheckDefault" />
135
              <CFormSwitch
136
                size="lg"
137
                label="Large switch checkbox input"
138
                id="formSwitchCheckDefaultLg"
139
              />
140
              <CFormSwitch
141
                size="xl"
142
                label="Extra large switch checkbox input"
143
                id="formSwitchCheckDefaultXL"
144
              />
145
            </DocsExample>
146
          </CCardBody>
147
        </CCard>
148
      </CCol>
149
      <CCol xs={12}>
150
        <CCard className="mb-4">
151
          <CCardHeader>
152
            <strong>React Checks and Radios</strong> <small>Default layout (stacked)</small>
153
          </CCardHeader>
154
          <CCardBody>
155
            <p className="text-body-secondary small">
156
              By default, any number of checkboxes and radios that are immediate sibling will be
157
              vertically stacked and appropriately spaced.
158
            </p>
159
            <DocsExample href="forms/checks-radios#default-stacked">
160
              <CFormCheck id="defaultCheck1" label="Default checkbox" />
161
              <CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
162
            </DocsExample>
163
            <DocsExample href="forms/checks-radios#default-stacked">
164
              <CFormCheck
165
                type="radio"
166
                name="exampleRadios"
167
                id="exampleRadios1"
168
                value="option1"
169
                label="Default radio"
170
                defaultChecked
171
              />
172
              <CFormCheck
173
                type="radio"
174
                name="exampleRadios"
175
                id="exampleRadios2"
176
                value="option2"
177
                label="Second default radio"
178
              />
179
              <CFormCheck
180
                type="radio"
181
                name="exampleRadios"
182
                id="exampleRadios3"
183
                value="option3"
184
                label="Disabled radio"
185
                disabled
186
              />
187
            </DocsExample>
188
          </CCardBody>
189
        </CCard>
190
      </CCol>
191
      <CCol xs={12}>
192
        <CCard className="mb-4">
193
          <CCardHeader>
194
            <strong>React Checks and Radios</strong> <small>Inline</small>
195
          </CCardHeader>
196
          <CCardBody>
197
            <p className="text-body-secondary small">
198
              Group checkboxes or radios on the same horizontal row by adding <code>inline</code>{' '}
199
              boolean property to any <code>&lt;CFormCheck&gt;</code>.
200
            </p>
201
            <DocsExample href="forms/checks-radios#inline">
202
              <CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
203
              <CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
204
              <CFormCheck
205
                inline
206
                id="inlineCheckbox3"
207
                value="option3"
208
                label="3 (disabled)"
209
                disabled
210
              />
211
            </DocsExample>
212
            <DocsExample href="forms/checks-radios#inline">
213
              <CFormCheck
214
                inline
215
                type="radio"
216
                name="inlineRadioOptions"
217
                id="inlineCheckbox1"
218
                value="option1"
219
                label="1"
220
              />
221
              <CFormCheck
222
                inline
223
                type="radio"
224
                name="inlineRadioOptions"
225
                id="inlineCheckbox2"
226
                value="option2"
227
                label="2"
228
              />
229
              <CFormCheck
230
                inline
231
                type="radio"
232
                name="inlineRadioOptions"
233
                id="inlineCheckbox3"
234
                value="option3"
235
                label="3 (disabled)"
236
                disabled
237
              />
238
            </DocsExample>
239
          </CCardBody>
240
        </CCard>
241
      </CCol>
242
      <CCol xs={12}>
243
        <CCard className="mb-4">
244
          <CCardHeader>
245
            <strong>React Checks and Radios</strong> <small>Without labels</small>
246
          </CCardHeader>
247
          <CCardBody>
248
            <p className="text-body-secondary small">
249
              Remember to still provide some form of accessible name for assistive technologies (for
250
              instance, using <code>aria-label</code>).
251
            </p>
252
            <DocsExample href="forms/checks-radios#without-labels">
253
              <div>
254
                <CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
255
              </div>
256
              <div>
257
                <CFormCheck
258
                  type="radio"
259
                  name="radioNoLabel"
260
                  id="radioNoLabel"
261
                  value=""
262
                  aria-label="..."
263
                />
264
              </div>
265
            </DocsExample>
266
          </CCardBody>
267
        </CCard>
268
      </CCol>
269
      <CCol xs={12}>
270
        <CCard className="mb-4">
271
          <CCardHeader>
272
            <strong>Toggle buttons</strong>
273
          </CCardHeader>
274
          <CCardBody>
275
            <p className="text-body-secondary small">
276
              Create button-like checkboxes and radio buttons by using <code>button</code> boolean
277
              property on the <code>&lt;CFormCheck&gt;</code> component. These toggle buttons can
278
              further be grouped in a button group if needed.
279
            </p>
280
            <DocsExample href="forms/checks-radios#toggle-buttons">
281
              <CFormCheck
282
                button={{ color: 'primary ' }}
283
                id="btn-check"
284
                autoComplete="off"
285
                label="Single toggle"
286
              />
287
            </DocsExample>
288
            <DocsExample href="forms/checks-radios#toggle-buttons">
289
              <CFormCheck
290
                button={{ color: 'primary ' }}
291
                id="btn-check-2"
292
                autoComplete="off"
293
                label="Checked"
294
                defaultChecked
295
              />
296
            </DocsExample>
297
            <DocsExample href="forms/checks-radios#toggle-buttons">
298
              <CFormCheck
299
                button={{ color: 'primary ' }}
300
                id="btn-check-3"
301
                autoComplete="off"
302
                label="Disabled"
303
                disabled
304
              />
305
            </DocsExample>
306
            <h3>Radio toggle buttons</h3>
307
            <DocsExample href="forms/checks-radios#toggle-buttons">
308
              <CFormCheck
309
                button={{ color: 'secondary' }}
310
                type="radio"
311
                name="options"
312
                id="option1"
313
                autoComplete="off"
314
                label="Checked"
315
                defaultChecked
316
              />
317
              <CFormCheck
318
                button={{ color: 'secondary' }}
319
                type="radio"
320
                name="options"
321
                id="option2"
322
                autoComplete="off"
323
                label="Radio"
324
              />
325
              <CFormCheck
326
                button={{ color: 'secondary' }}
327
                type="radio"
328
                name="options"
329
                id="option3"
330
                autoComplete="off"
331
                label="Radio"
332
                disabled
333
              />
334
              <CFormCheck
335
                button={{ color: 'secondary' }}
336
                type="radio"
337
                name="options"
338
                id="option4"
339
                autoComplete="off"
340
                label="Radio"
341
              />
342
            </DocsExample>
343
            <h3>Outlined styles</h3>
344
            <p className="text-body-secondary small">
345
              Different variants of button, such at the various outlined styles, are supported.
346
            </p>
347
            <DocsExample href="forms/checks-radios#toggle-buttons">
348
              <div>
349
                <CFormCheck
350
                  button={{ color: 'primary', variant: 'outline' }}
351
                  id="btn-check-outlined"
352
                  autoComplete="off"
353
                  label="Single toggle"
354
                />
355
              </div>
356
              <div>
357
                <CFormCheck
358
                  button={{ color: 'secondary', variant: 'outline' }}
359
                  id="btn-check-2-outlined"
360
                  autoComplete="off"
361
                  label="Checked"
362
                  defaultChecked
363
                />
364
              </div>
365
              <div>
366
                <CFormCheck
367
                  button={{ color: 'success', variant: 'outline' }}
368
                  type="radio"
369
                  name="options-outlined"
370
                  id="success-outlined"
371
                  autoComplete="off"
372
                  label="Radio"
373
                  defaultChecked
374
                />
375
                <CFormCheck
376
                  button={{ color: 'danger', variant: 'outline' }}
377
                  type="radio"
378
                  name="options-outlined"
379
                  id="danger-outlined"
380
                  autoComplete="off"
381
                  label="Radio"
382
                />
383
              </div>
384
            </DocsExample>
385
          </CCardBody>
386
        </CCard>
387
      </CCol>
388
    </CRow>
389
  )
390
}
391

392
export default ChecksRadios
393