refactor: add form components examples
This commit is contained in:
Łukasz Holeczek
parent
2e1d16dd01
commit
323e9b9d8d
408
src/views/forms/checks-radios/ChecksRadios.js
Normal file
408
src/views/forms/checks-radios/ChecksRadios.js
Normal file
@ -0,0 +1,408 @@
|
||||
import React from 'react'
|
||||
import { CCard, CCardBody, CCardHeader, CCol, CFormCheck, CRow } from '@coreui/react'
|
||||
import { DocsLink, Example } from 'src/reusable'
|
||||
|
||||
const ChecksRadios = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Checkbox</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios">
|
||||
<CFormCheck id="flexCheckDefault" label="Default checkbox" />
|
||||
<CFormCheck id="flexCheckChecked" label="Checked checkbox" defaultChecked />
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Checkbox</strong> <small>Disabled</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add the <code class="css-0">disabled</code> attribute and the associated{' '}
|
||||
<code class="css-0"><label></code>s are automatically styled to match with a
|
||||
lighter color to help indicate the input's state.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#disabled">
|
||||
<CFormCheck label="Disabled checkbox" disabled />
|
||||
<CFormCheck label="Disabled checked checkbox" defaultChecked disabled />
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Radio</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add the <code class="css-0">disabled</code> attribute and the associated{' '}
|
||||
<code class="css-0"><label></code>s are automatically styled to match with a
|
||||
lighter color to help indicate the input's state.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#radios">
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="flexRadioDefault"
|
||||
id="flexRadioDefault1"
|
||||
label="Default radio"
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="flexRadioDefault"
|
||||
id="flexRadioDefault2"
|
||||
label="Checked radio"
|
||||
defaultChecked
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Radio</strong> <small>Disabled</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#disabled-1">
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="flexRadioDisabled"
|
||||
id="flexRadioDisabled"
|
||||
label="Disabled radio"
|
||||
disabled
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="flexRadioDisabled"
|
||||
id="flexRadioCheckedDisabled"
|
||||
label="Disabled checked radio"
|
||||
defaultChecked
|
||||
disabled
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Switches</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
A switch has the markup of a custom checkbox but uses the{' '}
|
||||
<code class="css-0">switch</code> boolean properly to render a toggle switch. Switches
|
||||
also support the <code class="css-0">disabled</code> attribute.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#switches">
|
||||
<CFormCheck
|
||||
switch
|
||||
label="Default switch checkbox input"
|
||||
id="formSwitchCheckDefault"
|
||||
/>
|
||||
<CFormCheck
|
||||
switch
|
||||
label="Checked switch checkbox input"
|
||||
id="formSwitchCheckChecked"
|
||||
defaultChecked
|
||||
/>
|
||||
<CFormCheck
|
||||
switch
|
||||
label="Disabled switch checkbox input"
|
||||
id="formSwitchCheckDisabled"
|
||||
disabled
|
||||
/>
|
||||
<CFormCheck
|
||||
switch
|
||||
label="Disabled checked switch checkbox input"
|
||||
id="formSwitchCheckCheckedDisabled"
|
||||
defaultChecked
|
||||
disabled
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Switches</strong> <small>Sizes</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#sizes">
|
||||
<CFormCheck
|
||||
switch
|
||||
label="Default switch checkbox input"
|
||||
id="formSwitchCheckDefault"
|
||||
/>
|
||||
<CFormCheck
|
||||
switch
|
||||
size="lg"
|
||||
label="Large switch checkbox input"
|
||||
id="formSwitchCheckDefaultLg"
|
||||
/>
|
||||
<CFormCheck
|
||||
switch
|
||||
size="xl"
|
||||
label="Extra large switch checkbox input"
|
||||
id="formSwitchCheckDefaultXL"
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Checks and Radios</strong> <small>Default layout (stacked)</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
By default, any number of checkboxes and radios that are immediate sibling will be
|
||||
vertically stacked and appropriately spaced.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#default-stacked">
|
||||
<CFormCheck id="defaultCheck1" label="Default checkbox" />
|
||||
<CFormCheck id="defaultCheck2" label="Disabled checkbox" disabled />
|
||||
</Example>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#default-stacked">
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="exampleRadios"
|
||||
id="exampleRadios1"
|
||||
value="option1"
|
||||
label="Default radio"
|
||||
defaultChecked
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="exampleRadios"
|
||||
id="exampleRadios2"
|
||||
value="option2"
|
||||
label="Second default radio"
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="exampleRadios"
|
||||
id="exampleRadios3"
|
||||
value="option3"
|
||||
label="Disabled radio"
|
||||
disabled
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Checks and Radios</strong> <small>Inline</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Group checkboxes or radios on the same horizontal row by adding{' '}
|
||||
<code class="css-0">inline</code> boolean property to any{' '}
|
||||
<code class="css-0"><CFormCheck></code>.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#inline">
|
||||
<CFormCheck inline id="inlineCheckbox1" value="option1" label="1" />
|
||||
<CFormCheck inline id="inlineCheckbox2" value="option2" label="2" />
|
||||
<CFormCheck
|
||||
inline
|
||||
id="inlineCheckbox3"
|
||||
value="option3"
|
||||
label="3 (disabled)"
|
||||
disabled
|
||||
/>
|
||||
</Example>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#inline">
|
||||
<CFormCheck
|
||||
inline
|
||||
type="radio"
|
||||
name="inlineRadioOptions"
|
||||
id="inlineCheckbox1"
|
||||
value="option1"
|
||||
label="1"
|
||||
/>
|
||||
<CFormCheck
|
||||
inline
|
||||
type="radio"
|
||||
name="inlineRadioOptions"
|
||||
id="inlineCheckbox2"
|
||||
value="option2"
|
||||
label="2"
|
||||
/>
|
||||
<CFormCheck
|
||||
inline
|
||||
type="radio"
|
||||
name="inlineRadioOptions"
|
||||
id="inlineCheckbox3"
|
||||
value="option3"
|
||||
label="3 (disabled)"
|
||||
disabled
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Checks and Radios</strong> <small>Without labels</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Remember to still provide some form of accessible name for assistive technologies (for
|
||||
instance, using <code class="css-0">aria-label</code>).
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#without-labels">
|
||||
<div>
|
||||
<CFormCheck id="checkboxNoLabel" value="" aria-label="..." />
|
||||
</div>
|
||||
<div>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="radioNoLabel"
|
||||
id="radioNoLabel"
|
||||
value=""
|
||||
aria-label="..."
|
||||
/>
|
||||
</div>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Toggle buttons</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Create button-like checkboxes and radio buttons by using{' '}
|
||||
<code class="css-0">button</code> boolean property on the{' '}
|
||||
<code class="css-0"><CFormCheck></code> component. These toggle buttons can
|
||||
further be grouped in a button group if needed.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons">
|
||||
<CFormCheck button id="btn-check" autocomplete="off" label="Single toggle" />
|
||||
</Example>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons">
|
||||
<CFormCheck
|
||||
button
|
||||
id="btn-check-2"
|
||||
autocomplete="off"
|
||||
label="Checked"
|
||||
defaultChecked
|
||||
/>
|
||||
</Example>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons">
|
||||
<CFormCheck button id="btn-check-3" autocomplete="off" label="Disabled" disabled />
|
||||
</Example>
|
||||
<h3>Radio toggle buttons</h3>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons">
|
||||
<CFormCheck
|
||||
button
|
||||
buttonColor="secondary"
|
||||
type="radio"
|
||||
name="options"
|
||||
id="option1"
|
||||
autocomplete="off"
|
||||
label="Checked"
|
||||
defaultChecked
|
||||
/>
|
||||
<CFormCheck
|
||||
button
|
||||
buttonColor="secondary"
|
||||
type="radio"
|
||||
name="options"
|
||||
id="option2"
|
||||
autocomplete="off"
|
||||
label="Radio"
|
||||
/>
|
||||
<CFormCheck
|
||||
button
|
||||
buttonColor="secondary"
|
||||
type="radio"
|
||||
name="options"
|
||||
id="option3"
|
||||
autocomplete="off"
|
||||
label="Radio"
|
||||
disabled
|
||||
/>
|
||||
<CFormCheck
|
||||
button
|
||||
buttonColor="secondary"
|
||||
type="radio"
|
||||
name="options"
|
||||
id="option4"
|
||||
autocomplete="off"
|
||||
label="Radio"
|
||||
/>
|
||||
</Example>
|
||||
<h3>Outlined styles</h3>
|
||||
<p class="css-0">
|
||||
Different variants of button, such at the various outlined styles, are supported.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/checks-radios#toggle-buttons">
|
||||
<div>
|
||||
<CFormCheck
|
||||
button
|
||||
buttonColor="primary"
|
||||
buttonVariant="outline"
|
||||
id="btn-check-outlined"
|
||||
autocomplete="off"
|
||||
label="Single toggle"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<CFormCheck
|
||||
button
|
||||
buttonColor="secondary"
|
||||
buttonVariant="outline"
|
||||
id="btn-check-2-outlined"
|
||||
autocomplete="off"
|
||||
label="Checked"
|
||||
defaultChecked
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<CFormCheck
|
||||
button
|
||||
buttonColor="success"
|
||||
buttonVariant="outline"
|
||||
type="radio"
|
||||
name="options-outlined"
|
||||
id="success-outlined"
|
||||
autocomplete="off"
|
||||
label="Radio"
|
||||
defaultChecked
|
||||
/>
|
||||
<CFormCheck
|
||||
button
|
||||
buttonColor="danger"
|
||||
buttonVariant="outline"
|
||||
type="radio"
|
||||
name="options-outlined"
|
||||
id="danger-outlined"
|
||||
autocomplete="off"
|
||||
label="Radio"
|
||||
/>
|
||||
</div>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default ChecksRadios
|
||||
252
src/views/forms/form-control/FormControl.js
Normal file
252
src/views/forms/form-control/FormControl.js
Normal file
@ -0,0 +1,252 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CForm,
|
||||
CFormControl,
|
||||
CFormLabel,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import { DocsLink, Example } from 'src/reusable'
|
||||
|
||||
const FormControl = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Form Control</strong>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/form-control">
|
||||
<CForm>
|
||||
<div className="mb-3">
|
||||
<CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel>
|
||||
<CFormControl
|
||||
type="email"
|
||||
id="exampleFormControlInput1"
|
||||
placeholder="name@example.com"
|
||||
/>
|
||||
</div>
|
||||
<div className="mb-3">
|
||||
<CFormLabel htmlFor="exampleFormControlTextarea1">Example textarea</CFormLabel>
|
||||
<CFormControl
|
||||
component="textarea"
|
||||
id="exampleFormControlTextarea1"
|
||||
rows="3"
|
||||
></CFormControl>
|
||||
</div>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Form Control</strong> <small>Sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Set heights using <code class="css-0">size</code> property like{' '}
|
||||
<code class="css-0">size="lg"</code> and <code class="css-0">size="sm"</code>.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/form-control#sizing">
|
||||
<CFormControl
|
||||
type="text"
|
||||
size="lg"
|
||||
placeholder="Large input"
|
||||
aria-label="lg input example"
|
||||
/>
|
||||
<br />
|
||||
<CFormControl
|
||||
type="text"
|
||||
placeholder="Default input"
|
||||
aria-label="default input example"
|
||||
/>
|
||||
<br />
|
||||
<CFormControl
|
||||
type="text"
|
||||
size="sm"
|
||||
placeholder="Small input"
|
||||
aria-label="sm input example"
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Form Control</strong> <small>Disabled</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add the <code class="css-0">disabled</code> boolean attribute on an input to give it a
|
||||
grayed out appearance and remove pointer events.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/form-control#disabled">
|
||||
<CFormControl
|
||||
type="text"
|
||||
placeholder="Disabled input"
|
||||
aria-label="Disabled input example"
|
||||
disabled
|
||||
/>
|
||||
<br />
|
||||
<CFormControl
|
||||
type="text"
|
||||
placeholder="Disabled readonly input"
|
||||
aria-label="Disabled input example"
|
||||
disabled
|
||||
readOnly
|
||||
/>
|
||||
<br />
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Form Control</strong> <small>Readonly</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add the <code class="css-0">readOnly</code> boolean attribute on an input to prevent
|
||||
modification of the input's value. Read-only inputs appear lighter (just like disabled
|
||||
inputs), but retain the standard cursor.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/form-control#readonly">
|
||||
<CFormControl
|
||||
type="text"
|
||||
placeholder="Readonly input here..."
|
||||
aria-label="readonly input example"
|
||||
readOnly
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Form Control</strong> <small>Readonly plain text</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
If you want to have <code class="css-0"><input readonly></code> elements in your
|
||||
form styled as plain text, use the <code class="css-0">plainText</code> boolean
|
||||
property to remove the default form field styling and preserve the correct margin and
|
||||
padding.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/accordion">
|
||||
<CRow className="mb-3">
|
||||
<CFormLabel htmlFor="staticEmail" className="col-sm-2 col-form-label">
|
||||
Email
|
||||
</CFormLabel>
|
||||
<div className="col-sm-10">
|
||||
<CFormControl
|
||||
type="text"
|
||||
id="staticEmail"
|
||||
value="email@example.com"
|
||||
readOnly
|
||||
plainText
|
||||
/>
|
||||
</div>
|
||||
</CRow>
|
||||
<CRow className="mb-3">
|
||||
<CFormLabel htmlFor="inputPassword" className="col-sm-2 col-form-label">
|
||||
Password
|
||||
</CFormLabel>
|
||||
<div className="col-sm-10">
|
||||
<CFormControl type="password" id="inputPassword" />
|
||||
</div>
|
||||
</CRow>
|
||||
</Example>
|
||||
<Example href="https://coreui.io/react/docs/4.0/components/accordion">
|
||||
<CForm class="row g-3">
|
||||
<div class="col-auto">
|
||||
<CFormLabel htmlFor="staticEmail2" className="visually-hidden">
|
||||
Email
|
||||
</CFormLabel>
|
||||
<CFormControl
|
||||
type="text"
|
||||
id="staticEmail2"
|
||||
value="email@example.com"
|
||||
readOnly
|
||||
plainText
|
||||
/>
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<CFormLabel htmlFor="inputPassword2" className="visually-hidden">
|
||||
Password
|
||||
</CFormLabel>
|
||||
<CFormControl type="password" id="inputPassword2" placeholder="Password" />
|
||||
</div>
|
||||
<div class="col-auto">
|
||||
<CButton type="submit" className="mb-3">
|
||||
Confirm identity
|
||||
</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Form Control</strong> <small>File input</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/form-control#file-input">
|
||||
<div class="mb-3">
|
||||
<CFormLabel htmlFor="formFile">Default file input example</CFormLabel>
|
||||
<CFormControl type="file" id="formFile" />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormLabel htmlFor="formFileMultiple">Multiple files input example</CFormLabel>
|
||||
<CFormControl type="file" id="formFileMultiple" multiple />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormLabel htmlFor="formFileDisabled">Disabled file input example</CFormLabel>
|
||||
<CFormControl type="file" id="formFileDisabled" disabled />
|
||||
</div>
|
||||
<div class="mb-3">
|
||||
<CFormLabel htmlFor="formFileSm">Small file input example</CFormLabel>
|
||||
<CFormControl type="file" size="sm" id="formFileSm" />
|
||||
</div>
|
||||
<div>
|
||||
<CFormLabel htmlFor="formFileLg">Large file input example</CFormLabel>
|
||||
<CFormControl type="file" size="lg" id="formFileLg" />
|
||||
</div>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Form Control</strong> <small>Color</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/form-control#color">
|
||||
<CFormLabel htmlFor="exampleColorInput">Color picker</CFormLabel>
|
||||
<CFormControl
|
||||
type="color"
|
||||
id="exampleColorInput"
|
||||
value="#563d7c"
|
||||
title="Choose your color"
|
||||
/>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default FormControl
|
||||
505
src/views/forms/input-group/InputGroup.js
Normal file
505
src/views/forms/input-group/InputGroup.js
Normal file
@ -0,0 +1,505 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CDropdown,
|
||||
CDropdownDivider,
|
||||
CDropdownItem,
|
||||
CDropdownMenu,
|
||||
CDropdownToggle,
|
||||
CFormCheck,
|
||||
CFormControl,
|
||||
CFormLabel,
|
||||
CFormSelect,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import { DocsLink, Example } from 'src/reusable'
|
||||
|
||||
const Select = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Input group</strong> <small>Basic example</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Place one add-on or button on either side of an input. You may also place one on both
|
||||
sides of an input. Remember to place <code class="css-0"><CFormLabel></code>s
|
||||
outside the input group.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/input-group">
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText id="basic-addon1">@</CInputGroupText>
|
||||
<CFormControl
|
||||
placeholder="Username"
|
||||
aria-label="Username"
|
||||
aria-describedby="basic-addon1"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CFormControl
|
||||
placeholder="Recipient's username"
|
||||
aria-label="Recipient's username"
|
||||
aria-describedby="basic-addon2"
|
||||
/>
|
||||
<CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
|
||||
</CInputGroup>
|
||||
<CFormLabel htmlFor="basic-url">Your vanity URL</CFormLabel>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
|
||||
<CFormControl id="basic-url" aria-describedby="basic-addon3" />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>$</CInputGroupText>
|
||||
<CFormControl aria-label="Amount (to the nearest dollar)" />
|
||||
<CInputGroupText>.00</CInputGroupText>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CFormControl placeholder="Username" aria-label="Username" />
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormControl placeholder="Server" aria-label="Server" />
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>With textarea</CInputGroupText>
|
||||
<CFormControl component="textarea" aria-label="With textarea"></CFormControl>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Input group</strong> <small>Wrapping</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Input groups wrap by default via <code class="css-0">flex-wrap: wrap</code> in order
|
||||
to accommodate custom form field validation within an input group. You may disable
|
||||
this with <code class="css-0">.flex-nowrap</code>.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#wrapping">
|
||||
<CInputGroup className="flex-nowrap">
|
||||
<CInputGroupText id="addon-wrapping">@</CInputGroupText>
|
||||
<CFormControl
|
||||
placeholder="Username"
|
||||
aria-label="Username"
|
||||
aria-describedby="addon-wrapping"
|
||||
/>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Input group</strong> <small>Sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add the relative form sizing classes to the{' '}
|
||||
<code class="css-0"><CInputGroup></code> itself and contents within will
|
||||
automatically resize—no need for repeating the form control size classes on each
|
||||
element.
|
||||
</p>
|
||||
<p class="text-medium-emphasis small">
|
||||
<strong class="css-0">
|
||||
Sizing on the individual input group elements isn't supported.
|
||||
</strong>
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#sizing">
|
||||
<CInputGroup size="sm" className="mb-3">
|
||||
<CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
|
||||
<CFormControl
|
||||
aria-label="Sizing example input"
|
||||
aria-describedby="inputGroup-sizing-sm"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
|
||||
<CFormControl
|
||||
aria-label="Sizing example input"
|
||||
aria-describedby="inputGroup-sizing-default"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup size="lg">
|
||||
<CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
|
||||
<CFormControl
|
||||
aria-label="Sizing example input"
|
||||
aria-describedby="inputGroup-sizing-lg"
|
||||
/>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Input group</strong> <small>Checkboxes and radios</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Place any checkbox or radio option within an input group's addon instead of text.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#checkboxes-and-radios">
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>
|
||||
<CFormCheck
|
||||
type="checkbox"
|
||||
value=""
|
||||
aria-label="Checkbox for following text input"
|
||||
/>
|
||||
</CInputGroupText>
|
||||
<CFormControl aria-label="Text input with checkbox" />
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
value=""
|
||||
aria-label="Radio button for following text input"
|
||||
/>
|
||||
</CInputGroupText>
|
||||
<CFormControl aria-label="Text input with radio button" />
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Input group</strong> <small>Multiple inputs</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
While multiple <code class="css-0"><CFormControl></code>s are supported
|
||||
visually, validation styles are only available for input groups with a single{' '}
|
||||
<code class="css-0"><CFormControl></code>.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#multiple-inputs">
|
||||
<CInputGroup>
|
||||
<CInputGroupText>First and last name</CInputGroupText>
|
||||
<CFormControl aria-label="First name" />
|
||||
<CFormControl aria-label="Last name" />
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Input group</strong> <small>Multiple addons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Multiple add-ons are supported and can be mixed with checkbox and radio input
|
||||
versions..
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#multiple-addons">
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText>$</CInputGroupText>
|
||||
<CInputGroupText>0.00</CInputGroupText>
|
||||
<CFormControl aria-label="Dollar amount (with dot and two decimal places)" />
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormControl aria-label="Dollar amount (with dot and two decimal places)" />
|
||||
<CInputGroupText>$</CInputGroupText>
|
||||
<CInputGroupText>0.00</CInputGroupText>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Input group</strong> <small>Button addons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Multiple add-ons are supported and can be mixed with checkbox and radio input
|
||||
versions..
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#button-addons">
|
||||
<CInputGroup className="mb-3">
|
||||
<CButton type="button" color="secondary" variant="outline" id="button-addon1">
|
||||
Button
|
||||
</CButton>
|
||||
<CFormControl
|
||||
placeholder=""
|
||||
aria-label="Example text with button addon"
|
||||
aria-describedby="button-addon1"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CFormControl
|
||||
placeholder="Recipient's username"
|
||||
aria-label="Recipient's username"
|
||||
aria-describedby="button-addon2"
|
||||
/>
|
||||
<CButton type="button" color="secondary" variant="outline" id="button-addon2">
|
||||
Button
|
||||
</CButton>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Button
|
||||
</CButton>
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Button
|
||||
</CButton>
|
||||
<CFormControl placeholder="" aria-label="Example text with two button addons" />
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormControl
|
||||
placeholder="Recipient's username"
|
||||
aria-label="Recipient's username with two button addons"
|
||||
/>
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Button
|
||||
</CButton>
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Button
|
||||
</CButton>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Input group</strong> <small>Buttons with dropdowns</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#buttons-with-dropdowns">
|
||||
<CInputGroup className="mb-3">
|
||||
<CDropdown>
|
||||
<CDropdownToggle color="secondary" variant="outline">
|
||||
Dropdown
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CFormControl aria-label="Text input with dropdown button" />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CFormControl aria-label="Text input with dropdown button" />
|
||||
<CDropdown alignment="end">
|
||||
<CDropdownToggle color="secondary" variant="outline">
|
||||
Dropdown
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CDropdown>
|
||||
<CDropdownToggle color="secondary" variant="outline">
|
||||
Dropdown
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CFormControl aria-label="Text input with 2 dropdown buttons" />
|
||||
<CDropdown alignment="end">
|
||||
<CDropdownToggle color="secondary" variant="outline">
|
||||
Dropdown
|
||||
</CDropdownToggle>
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Input group</strong> <small>Segmented buttons</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#segmented-buttons">
|
||||
<CInputGroup className="mb-3">
|
||||
<CDropdown>
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Action
|
||||
</CButton>
|
||||
<CDropdownToggle color="secondary" variant="outline" split />
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
<CFormControl aria-label="Text input with segmented dropdown button" />
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormControl aria-label="Text input with segmented dropdown button" />
|
||||
<CDropdown alignment="end">
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Action
|
||||
</CButton>
|
||||
<CDropdownToggle color="secondary" variant="outline" split />
|
||||
<CDropdownMenu>
|
||||
<CDropdownItem href="#">Action</CDropdownItem>
|
||||
<CDropdownItem href="#">Another action</CDropdownItem>
|
||||
<CDropdownItem href="#">Something else here</CDropdownItem>
|
||||
<CDropdownDivider />
|
||||
<CDropdownItem href="#">Separated link</CDropdownItem>
|
||||
</CDropdownMenu>
|
||||
</CDropdown>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Input group</strong> <small>Custom select</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#custom-select">
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText component="label" htmlFor="inputGroupSelect01">
|
||||
Options
|
||||
</CInputGroupText>
|
||||
<CFormSelect id="inputGroupSelect01">
|
||||
<option selected>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CFormSelect id="inputGroupSelect02">
|
||||
<option selected>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<CInputGroupText component="label" htmlFor="inputGroupSelect02">
|
||||
Options
|
||||
</CInputGroupText>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Button
|
||||
</CButton>
|
||||
<CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">
|
||||
<option selected>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">
|
||||
<option selected>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<CButton type="button" color="secondary" variant="outline">
|
||||
Button
|
||||
</CButton>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Input group</strong> <small>Custom file input</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/input-group#custom-file-input">
|
||||
<CInputGroup className="mb-3">
|
||||
<CInputGroupText component="label" htmlFor="inputGroupFile01">
|
||||
Upload
|
||||
</CInputGroupText>
|
||||
<CFormControl type="file" id="inputGroupFile01" />
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CFormControl type="file" id="inputGroupFile02" />
|
||||
<CInputGroupText component="label" htmlFor="inputGroupFile02">
|
||||
Upload
|
||||
</CInputGroupText>
|
||||
</CInputGroup>
|
||||
<CInputGroup className="mb-3">
|
||||
<CButton
|
||||
type="button"
|
||||
color="secondary"
|
||||
variant="outline"
|
||||
id="inputGroupFileAddon03"
|
||||
>
|
||||
Button
|
||||
</CButton>
|
||||
<CFormControl
|
||||
type="file"
|
||||
id="inputGroupFile03"
|
||||
aria-describedby="inputGroupFileAddon03"
|
||||
aria-label="Upload"
|
||||
/>
|
||||
</CInputGroup>
|
||||
<CInputGroup>
|
||||
<CFormControl
|
||||
type="file"
|
||||
id="inputGroupFile04"
|
||||
aria-describedby="inputGroupFileAddon04"
|
||||
aria-label="Upload"
|
||||
/>
|
||||
<CButton
|
||||
type="button"
|
||||
color="secondary"
|
||||
variant="outline"
|
||||
id="inputGroupFileAddon04"
|
||||
>
|
||||
Button
|
||||
</CButton>
|
||||
</CInputGroup>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Select
|
||||
425
src/views/forms/layout/Layout.js
Normal file
425
src/views/forms/layout/Layout.js
Normal file
@ -0,0 +1,425 @@
|
||||
import React from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CForm,
|
||||
CFormCheck,
|
||||
CFormControl,
|
||||
CFormLabel,
|
||||
CFormSelect,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import { DocsLink, Example } from 'src/reusable'
|
||||
|
||||
const Layout = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Layout</strong> <small>Form grid</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
More complex forms can be built using our grid classes. Use these for form layouts
|
||||
that require multiple columns, varied widths, and additional alignment options.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/layout#form-grid">
|
||||
<CRow>
|
||||
<CCol xs>
|
||||
<CFormControl placeholder="First name" aria-label="First name" />
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CFormControl placeholder="Last name" aria-label="Last name" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Layout</strong> <small>Gutters</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
By adding{' '}
|
||||
<a href="https://coreui.io/docs/layout/gutters/" class="css-0">
|
||||
gutter modifier classes
|
||||
</a>
|
||||
, you can have control over the gutter width in as well the inline as block direction.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/layout#gutters">
|
||||
<CRow className="g-3">
|
||||
<CCol xs>
|
||||
<CFormControl placeholder="First name" aria-label="First name" />
|
||||
</CCol>
|
||||
<CCol xs>
|
||||
<CFormControl placeholder="Last name" aria-label="Last name" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
<p class="text-medium-emphasis small">
|
||||
More complex layouts can also be created with the grid system.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/layout#gutters">
|
||||
<CForm className="row g-3">
|
||||
<CCol md="6">
|
||||
<CFormLabel htmlFor="inputEmail4">Email</CFormLabel>
|
||||
<CFormControl type="email" id="inputEmail4" />
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CFormLabel htmlFor="inputPassword4">Password</CFormLabel>
|
||||
<CFormControl type="password" id="inputPassword4" />
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CFormLabel htmlFor="inputAddress">Address</CFormLabel>
|
||||
<CFormControl id="inputAddress" placeholder="1234 Main St" />
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CFormLabel htmlFor="inputAddress2">Address 2</CFormLabel>
|
||||
<CFormControl id="inputAddress2" placeholder="Apartment, studio, or floor" />
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CFormLabel htmlFor="inputCity">City</CFormLabel>
|
||||
<CFormControl id="inputCity" />
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormLabel htmlFor="inputState">State</CFormLabel>
|
||||
<CFormSelect id="inputState">
|
||||
<option selected>Choose...</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol md="2">
|
||||
<CFormLabel htmlFor="inputZip">Zip</CFormLabel>
|
||||
<CFormControl id="inputZip" />
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CFormCheck type="checkbox" id="gridCheck" label="Check me out" />
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CButton type="submit">Sign in</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Layout</strong> <small>Horizontal form</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Create horizontal forms with the grid by adding the <code class="css-0">.row</code>{' '}
|
||||
class to form groups and using the <code class="css-0">.col-*-*</code> classes to
|
||||
specify the width of your labels and controls. Be sure to add{' '}
|
||||
<code class="css-0">.col-form-label</code> to your{' '}
|
||||
<code class="css-0"><CFormLabel></code>s as well so they're vertically centered
|
||||
with their associated form controls.
|
||||
</p>
|
||||
<p class="text-medium-emphasis small">
|
||||
At times, you maybe need to use margin or padding utilities to create that perfect
|
||||
alignment you need. For example, we've removed the{' '}
|
||||
<code class="css-0">padding-top</code> on our stacked radio inputs label to better
|
||||
align the text baseline.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/layout#horizontal-form">
|
||||
<CForm>
|
||||
<CRow className="mb-3">
|
||||
<CFormLabel htmlFor="inputEmail3" className="col-sm-2 col-form-label">
|
||||
Email
|
||||
</CFormLabel>
|
||||
<CCol sm="10">
|
||||
<CFormControl type="email" id="inputEmail3" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow className="mb-3">
|
||||
<CFormLabel htmlFor="inputPassword3" className="col-sm-2 col-form-label">
|
||||
Password
|
||||
</CFormLabel>
|
||||
<CCol sm="10">
|
||||
<CFormControl type="password" id="inputPassword3" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
<fieldset className="row mb-3">
|
||||
<legend className="col-form-label col-sm-2 pt-0">Radios</legend>
|
||||
<CCol sm="10">
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="gridRadios"
|
||||
id="gridRadios1"
|
||||
value="option1"
|
||||
label="First radio"
|
||||
defaultChecked
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="gridRadios"
|
||||
id="gridRadios2"
|
||||
value="option2"
|
||||
label="Second radio"
|
||||
/>
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="gridRadios"
|
||||
id="gridRadios3"
|
||||
value="option3"
|
||||
label="Third disabled radio"
|
||||
disabled
|
||||
/>
|
||||
</CCol>
|
||||
</fieldset>
|
||||
<CRow className="mb-3">
|
||||
<div className="col-sm-10 offset-sm-2">
|
||||
<CFormCheck type="checkbox" id="gridCheck1" label="Example checkbox" />
|
||||
</div>
|
||||
</CRow>
|
||||
<CButton type="submit">Sign in</CButton>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Layout</strong> <small>Horizontal form label sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Be sure to use <code class="css-0">.col-form-label-sm</code> or{' '}
|
||||
<code class="css-0">.col-form-label-lg</code> to your{' '}
|
||||
<code class="css-0"><CFormLabel></code>s or{' '}
|
||||
<code class="css-0"><legend></code>s to correctly follow the size of{' '}
|
||||
<code class="css-0">.form-control-lg</code> and{' '}
|
||||
<code class="css-0">.form-control-sm</code>.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/layout#horizontal-form-label-sizing">
|
||||
<CRow className="mb-3">
|
||||
<CFormLabel
|
||||
htmlFor="colFormLabelSm"
|
||||
className="col-sm-2 col-form-label col-form-label-sm"
|
||||
>
|
||||
Email
|
||||
</CFormLabel>
|
||||
<CCol sm="10">
|
||||
<CFormControl
|
||||
type="email"
|
||||
className="form-control form-control-sm"
|
||||
id="colFormLabelSm"
|
||||
placeholder="col-form-label-sm"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow className="mb-3">
|
||||
<CFormLabel htmlFor="colFormLabel" className="col-sm-2 col-form-label">
|
||||
Email
|
||||
</CFormLabel>
|
||||
<CCol sm="10">
|
||||
<CFormControl type="email" id="colFormLabel" placeholder="col-form-label" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
<CRow>
|
||||
<CFormLabel
|
||||
htmlFor="colFormLabelLg"
|
||||
className="col-sm-2 col-form-label col-form-label-lg"
|
||||
>
|
||||
Email
|
||||
</CFormLabel>
|
||||
<CCol sm="10">
|
||||
<CFormControl
|
||||
type="email"
|
||||
className="form-control form-control-lg"
|
||||
id="colFormLabelLg"
|
||||
placeholder="col-form-label-lg"
|
||||
/>
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Layout</strong> <small>Column sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="css-0">
|
||||
As shown in the previous examples, our grid system allows you to place any number of{' '}
|
||||
<code class="css-0"><CCol></code>s within a{' '}
|
||||
<code class="css-0"><CRow></code>. They'll split the available width equally
|
||||
between them. You may also pick a subset of your columns to take up more or less
|
||||
space, while the remaining <code class="css-0"><CCol></code>s equally split the
|
||||
rest, with specific column classes like <code class="css-0"><CCol sm="7"></code>
|
||||
.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/layout#column-sizing">
|
||||
<CRow className="g-3">
|
||||
<CCol sm="7">
|
||||
<CFormControl placeholder="City" aria-label="City" />
|
||||
</CCol>
|
||||
<CCol sm>
|
||||
<CFormControl placeholder="State" aria-label="State" />
|
||||
</CCol>
|
||||
<CCol sm>
|
||||
<CFormControl placeholder="Zip" aria-label="Zip" />
|
||||
</CCol>
|
||||
</CRow>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Layout</strong> <small>Auto-sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="css-0">
|
||||
The example below uses a flexbox utility to vertically center the contents and changes{' '}
|
||||
<code class="css-0"><CCol></code> to{' '}
|
||||
<code class="css-0"><CCol xs="auto"></code> so that your columns only take up as
|
||||
much space as needed. Put another way, the column sizes itself based on the contents.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/layout#auto-sizing">
|
||||
<CForm className="row gy-2 gx-3 align-items-center">
|
||||
<CCol xs="auto">
|
||||
<CFormLabel className="visually-hidden" htmlFor="autoSizingInput">
|
||||
Name
|
||||
</CFormLabel>
|
||||
<CFormControl id="autoSizingInput" placeholder="Jane Doe" />
|
||||
</CCol>
|
||||
<CCol xs="auto">
|
||||
<CFormLabel className="visually-hidden" htmlFor="autoSizingInputGroup">
|
||||
Username
|
||||
</CFormLabel>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormControl id="autoSizingInputGroup" placeholder="Username" />
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol xs="auto">
|
||||
<CFormLabel className="visually-hidden" htmlFor="autoSizingSelect">
|
||||
Preference
|
||||
</CFormLabel>
|
||||
<CFormSelect id="autoSizingSelect">
|
||||
<option selected>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol xs="auto">
|
||||
<CFormCheck type="checkbox" id="autoSizingCheck" label="Remember me" />
|
||||
</CCol>
|
||||
<CCol xs="auto">
|
||||
<CButton type="submit">Submit</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
</Example>
|
||||
<p class="css-0">
|
||||
You can then remix that once again with size-specific column classes.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/layout#auto-sizing">
|
||||
<CForm className="row gx-3 gy-2 align-items-center">
|
||||
<CCol sm="3">
|
||||
<CFormLabel className="visually-hidden" htmlFor="specificSizeInputName">
|
||||
Name
|
||||
</CFormLabel>
|
||||
<CFormControl id="specificSizeInputName" placeholder="Jane Doe" />
|
||||
</CCol>
|
||||
<CCol sm="3">
|
||||
<CFormLabel className="visually-hidden" htmlFor="specificSizeInputGroupUsername">
|
||||
Username
|
||||
</CFormLabel>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormControl id="specificSizeInputGroupUsername" placeholder="Username" />
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol sm="3">
|
||||
<CFormLabel className="visually-hidden" htmlFor="specificSizeSelect">
|
||||
Preference
|
||||
</CFormLabel>
|
||||
<CFormSelect id="specificSizeSelect">
|
||||
<option selected>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol xs="auto">
|
||||
<CFormCheck type="checkbox" id="autoSizingCheck2" label="Remember me" />
|
||||
</CCol>
|
||||
<CCol xs="auto">
|
||||
<CButton type="submit">Submit</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Layout</strong> <small>Inline forms</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="css-0">
|
||||
Use the <code class="css-0"><CCol xs="auto"></code> class to create horizontal
|
||||
layouts. By adding{' '}
|
||||
<a href="https://coreui.io/docs/layout/gutters/" class="css-0">
|
||||
gutter modifier classes
|
||||
</a>
|
||||
, we will have gutters in horizontal and vertical directions. The{' '}
|
||||
<code class="css-0">.align-items-center</code> aligns the form elements to the middle,
|
||||
making the <code class="css-0"><CFormCheck></code> align properly.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/layout#inline-forms">
|
||||
<CForm className="row row-cols-lg-auto g-3 align-items-center">
|
||||
<CCol xs="12">
|
||||
<CFormLabel className="visually-hidden" htmlFor="inlineFormInputGroupUsername">
|
||||
Username
|
||||
</CFormLabel>
|
||||
<CInputGroup>
|
||||
<CInputGroupText>@</CInputGroupText>
|
||||
<CFormControl id="inlineFormInputGroupUsername" placeholder="Username" />
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CFormLabel className="visually-hidden" htmlFor="inlineFormSelectPref">
|
||||
Preference
|
||||
</CFormLabel>
|
||||
<CFormSelect id="inlineFormSelectPref">
|
||||
<option selected>Choose...</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CFormCheck type="checkbox" id="inlineFormCheck" label="Remember me" />
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CButton type="submit">Submit</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Layout
|
||||
84
src/views/forms/range/Range.js
Normal file
84
src/views/forms/range/Range.js
Normal file
@ -0,0 +1,84 @@
|
||||
import React from 'react'
|
||||
import { CCard, CCardBody, CCardHeader, CCol, CFormLabel, CFormRange, CRow } from '@coreui/react'
|
||||
import { DocsLink, Example } from 'src/reusable'
|
||||
|
||||
const Range = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Range</strong> <small></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Create custom <code class="css-0"><input type="range"></code> controls with{' '}
|
||||
<code class="css-0"><CFormControl></code>.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/range">
|
||||
<CFormLabel htmlFor="customRange1">Example range</CFormLabel>
|
||||
<CFormRange id="customRange1" />
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Range</strong> <small>Disabled</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Add the <code class="css-0">disabled</code> boolean attribute on an input to give it a
|
||||
grayed out appearance and remove pointer events.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/range#disabled">
|
||||
<CFormLabel htmlFor="disabledRange">Disabled range</CFormLabel>
|
||||
<CFormRange id="disabledRange" disabled />
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Range</strong> <small>Min and max</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Range inputs have implicit values for <code class="css-0">min</code> and{' '}
|
||||
<code class="css-0">max</code>—<code class="css-0">0</code> and{' '}
|
||||
<code class="css-0">100</code>, respectively. You may specify new values for those
|
||||
using the <code class="css-0">min</code> and <code class="css-0">max</code>{' '}
|
||||
attributes.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/range#min-and-max">
|
||||
<CFormLabel htmlFor="customRange2">Example range</CFormLabel>
|
||||
<CFormRange min="0" max="5" defaultValue="3" id="customRange2" />
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Range</strong> <small>Steps</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
By default, range inputs "snap" to integer values. To change this, you can specify a{' '}
|
||||
<code class="css-0">step</code> value. In the example below, we double the number of
|
||||
steps by using <code class="css-0">step="0.5"</code>.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/range#steps">
|
||||
<CFormLabel htmlFor="customRange3">Example range</CFormLabel>
|
||||
<CFormRange min="0" max="5" step="0.5" defaultValue="3" id="customRange3" />
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Range
|
||||
111
src/views/forms/select/Select.js
Normal file
111
src/views/forms/select/Select.js
Normal file
@ -0,0 +1,111 @@
|
||||
import React from 'react'
|
||||
import { CCard, CCardBody, CCardHeader, CCol, CFormSelect, CRow } from '@coreui/react'
|
||||
import { DocsLink, Example } from 'src/reusable'
|
||||
|
||||
const Select = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Select</strong> <small>Default</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/select">
|
||||
<CFormSelect aria-label="Default select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Select</strong> <small>Sizing</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
You may also choose from small and large custom selects to match our similarly sized
|
||||
text inputs.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/select#sizing">
|
||||
<CFormSelect size="lg" className="mb-3" aria-label="Large select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<CFormSelect size="sm" className="mb-3" aria-label="Small select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</Example>
|
||||
<p class="text-medium-emphasis small">
|
||||
The <code class="css-0">multiple</code> attribute is also supported:
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/select#sizing">
|
||||
<CFormSelect size="lg" multiple aria-label="Multiple select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</Example>
|
||||
<p class="text-medium-emphasis small">
|
||||
As is the <code class="css-0">htmlSize</code> property:
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/select#sizing">
|
||||
<CFormSelect size="lg" multiple aria-label="Multiple select example">
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Select</strong> <small>Disabled</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="css-0">
|
||||
Add the <code class="css-0">disabled</code> boolean attribute on a select to give it a
|
||||
grayed out appearance and remove pointer events.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/select#disabled">
|
||||
<CFormSelect aria-label="Disabled select example" disabled>
|
||||
<option selected>Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
{/* <CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>React Select</strong> <small></small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/select">
|
||||
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol> */}
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Select
|
||||
505
src/views/forms/validation/Validation.js
Normal file
505
src/views/forms/validation/Validation.js
Normal file
@ -0,0 +1,505 @@
|
||||
import React, { useState } from 'react'
|
||||
import {
|
||||
CButton,
|
||||
CCard,
|
||||
CCardBody,
|
||||
CCardHeader,
|
||||
CCol,
|
||||
CForm,
|
||||
CFormCheck,
|
||||
CFormControl,
|
||||
CFormFeedback,
|
||||
CFormLabel,
|
||||
CFormSelect,
|
||||
CInputGroup,
|
||||
CInputGroupText,
|
||||
CRow,
|
||||
} from '@coreui/react'
|
||||
import { DocsLink, Example } from 'src/reusable'
|
||||
|
||||
const CustomStyles = () => {
|
||||
const [validated, setValidated] = useState(false)
|
||||
const handleSubmit = (event) => {
|
||||
const form = event.currentTarget
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
setValidated(true)
|
||||
}
|
||||
return (
|
||||
<CForm
|
||||
className="row g-3 needs-validation"
|
||||
noValidate
|
||||
validated={validated}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<CCol md="4">
|
||||
<CFormLabel htmlFor="validationCustom01">Email</CFormLabel>
|
||||
<CFormControl type="text" id="validationCustom01" value="Mark" required />
|
||||
<CFormFeedback valid>Looks good!</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormLabel htmlFor="validationCustom02">Email</CFormLabel>
|
||||
<CFormControl type="text" id="validationCustom02" value="Otto" required />
|
||||
<CFormFeedback valid>Looks good!</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormLabel htmlFor="validationCustomUsername">Username</CFormLabel>
|
||||
<CInputGroup className="has-validation">
|
||||
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
|
||||
<CFormControl
|
||||
type="text"
|
||||
id="validationCustomUsername"
|
||||
value=""
|
||||
aria-describedby="inputGroupPrepend"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>Please choose a username.</CFormFeedback>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CFormLabel htmlFor="validationCustom03">City</CFormLabel>
|
||||
<CFormControl type="text" id="validationCustom03" required />
|
||||
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormLabel htmlFor="validationCustom04">City</CFormLabel>
|
||||
<CFormSelect id="validationCustom04">
|
||||
<option selected disabled>
|
||||
Choose...
|
||||
</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormLabel htmlFor="validationCustom05">City</CFormLabel>
|
||||
<CFormControl type="text" id="validationCustom05" required />
|
||||
<CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CFormCheck
|
||||
type="checkbox"
|
||||
id="invalidCheck"
|
||||
label="Agree to terms and conditions"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CButton color="primary" type="submit">
|
||||
Submit form
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
)
|
||||
}
|
||||
|
||||
const BrowserDefaults = () => {
|
||||
const [validated, setValidated] = useState(false)
|
||||
const handleSubmit = (event) => {
|
||||
const form = event.currentTarget
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
setValidated(true)
|
||||
}
|
||||
return (
|
||||
<CForm className="row g-3 needs-validation" validated={validated} onSubmit={handleSubmit}>
|
||||
<CCol md="4">
|
||||
<CFormLabel htmlFor="validationDefault01">Email</CFormLabel>
|
||||
<CFormControl type="text" id="validationDefault01" value="Mark" required />
|
||||
<CFormFeedback valid>Looks good!</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormLabel htmlFor="validationDefault02">Email</CFormLabel>
|
||||
<CFormControl type="text" id="validationDefault02" value="Otto" required />
|
||||
<CFormFeedback valid>Looks good!</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormLabel htmlFor="validationDefaultUsername">Username</CFormLabel>
|
||||
<CInputGroup className="has-validation">
|
||||
<CInputGroupText id="inputGroupPrepend02">@</CInputGroupText>
|
||||
<CFormControl
|
||||
type="text"
|
||||
id="validationDefaultUsername"
|
||||
value=""
|
||||
aria-describedby="inputGroupPrepend02"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>Please choose a username.</CFormFeedback>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CFormLabel htmlFor="validationDefault03">City</CFormLabel>
|
||||
<CFormControl type="text" id="validationDefault03" required />
|
||||
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormLabel htmlFor="validationDefault04">City</CFormLabel>
|
||||
<CFormSelect id="validationDefault04">
|
||||
<option selected disabled>
|
||||
Choose...
|
||||
</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormLabel htmlFor="validationDefault05">City</CFormLabel>
|
||||
<CFormControl type="text" id="validationDefault05" required />
|
||||
<CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CFormCheck
|
||||
type="checkbox"
|
||||
id="invalidCheck"
|
||||
label="Agree to terms and conditions"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CButton color="primary" type="submit">
|
||||
Submit form
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
)
|
||||
}
|
||||
|
||||
const Tooltips = () => {
|
||||
const [validated, setValidated] = useState(false)
|
||||
const handleSubmit = (event) => {
|
||||
const form = event.currentTarget
|
||||
if (form.checkValidity() === false) {
|
||||
event.preventDefault()
|
||||
event.stopPropagation()
|
||||
}
|
||||
setValidated(true)
|
||||
}
|
||||
return (
|
||||
<CForm
|
||||
className="row g-3 needs-validation"
|
||||
noValidate
|
||||
validated={validated}
|
||||
onSubmit={handleSubmit}
|
||||
>
|
||||
<CCol md="4" className="position-relative">
|
||||
<CFormLabel htmlFor="validationTooltip01">Email</CFormLabel>
|
||||
<CFormControl type="text" id="validationTooltip01" value="Mark" required />
|
||||
<CFormFeedback tooltip valid>
|
||||
Looks good!
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4" className="position-relative">
|
||||
<CFormLabel htmlFor="validationTooltip02">Email</CFormLabel>
|
||||
<CFormControl type="text" id="validationTooltip02" value="Otto" required />
|
||||
<CFormFeedback tooltip valid>
|
||||
Looks good!
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4" className="position-relative">
|
||||
<CFormLabel htmlFor="validationTooltipUsername">Username</CFormLabel>
|
||||
<CInputGroup className="has-validation">
|
||||
<CInputGroupText id="inputGroupPrepend">@</CInputGroupText>
|
||||
<CFormControl
|
||||
type="text"
|
||||
id="validationTooltipUsername"
|
||||
value=""
|
||||
aria-describedby="inputGroupPrepend"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback tooltip invalid>
|
||||
Please choose a username.
|
||||
</CFormFeedback>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol md="6" className="position-relative">
|
||||
<CFormLabel htmlFor="validationTooltip03">City</CFormLabel>
|
||||
<CFormControl type="text" id="validationTooltip03" required />
|
||||
<CFormFeedback tooltip invalid>
|
||||
Please provide a valid city.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3" className="position-relative">
|
||||
<CFormLabel htmlFor="validationTooltip04">City</CFormLabel>
|
||||
<CFormSelect id="validationTooltip04" required>
|
||||
<option selected disabled value="">
|
||||
Choose...
|
||||
</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback tooltip invalid>
|
||||
Please provide a valid city.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3" className="position-relative">
|
||||
<CFormLabel htmlFor="validationTooltip05">City</CFormLabel>
|
||||
<CFormControl type="text" id="validationTooltip05" required />
|
||||
<CFormFeedback tooltip invalid>
|
||||
Please provide a valid zip.
|
||||
</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs="12" className="position-relative">
|
||||
<CButton color="primary" type="submit">
|
||||
Submit form
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
)
|
||||
}
|
||||
|
||||
const Validation = () => {
|
||||
return (
|
||||
<CRow>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Validation</strong> <small>Custom styles</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
For custom CoreUI form validation messages, you'll need to add the{' '}
|
||||
<code class="css-0">noValidate</code> boolean property to your{' '}
|
||||
<code class="css-0"><CForm></code>. This disables the browser default feedback
|
||||
tooltips, but still provides access to the form validation APIs in JavaScript. Try to
|
||||
submit the form below; our JavaScript will intercept the submit button and relay
|
||||
feedback to you. When attempting to submit, you'll see the{' '}
|
||||
<code class="css-0">:invalid</code> and <code class="css-0">:valid</code> styles
|
||||
applied to your form controls.
|
||||
</p>
|
||||
<p class="text-medium-emphasis small">
|
||||
Custom feedback styles apply custom colors, borders, focus styles, and background
|
||||
icons to better communicate feedback.{' '}
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/validation">
|
||||
{CustomStyles()}
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Validation</strong> <small>Browser defaults</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Not interested in custom validation feedback messages or writing JavaScript to change
|
||||
form behaviors? All good, you can use the browser defaults. Try submitting the form
|
||||
below. Depending on your browser and OS, you'll see a slightly different style of
|
||||
feedback.
|
||||
</p>
|
||||
<p class="text-medium-emphasis small">
|
||||
While these feedback styles cannot be styled with CSS, you can still customize the
|
||||
feedback text through JavaScript.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/validation#browser-defaults">
|
||||
{BrowserDefaults()}
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Validation</strong> <small>Server side</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
We recommend using client-side validation, but in case you require server-side
|
||||
validation, you can indicate invalid and valid form fields with{' '}
|
||||
<code class="css-0">isInvalid</code> and <code class="css-0">isValid</code> boolean
|
||||
properties.
|
||||
</p>
|
||||
<p class="text-medium-emphasis small">
|
||||
For invalid fields, ensure that the invalid feedback/error message is associated with
|
||||
the relevant form field using <code class="css-0">aria-describedby</code> (noting that
|
||||
this attribute allows more than one <code class="css-0">id</code> to be referenced, in
|
||||
case the field already points to additional form text).
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/validation#server-side">
|
||||
<CForm className="row g-3 needs-validation">
|
||||
<CCol md="4">
|
||||
<CFormLabel htmlFor="validationServer01">Email</CFormLabel>
|
||||
<CFormControl type="text" id="validationServer01" value="Mark" isValid required />
|
||||
<CFormFeedback valid>Looks good!</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormLabel htmlFor="validationServer02">Email</CFormLabel>
|
||||
<CFormControl type="text" id="validationServer02" value="Otto" isValid required />
|
||||
<CFormFeedback valid>Looks good!</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="4">
|
||||
<CFormLabel htmlFor="validationServerUsername">Username</CFormLabel>
|
||||
<CInputGroup className="has-validation">
|
||||
<CInputGroupText id="inputGroupPrepend03">@</CInputGroupText>
|
||||
<CFormControl
|
||||
type="text"
|
||||
id="validationServerUsername"
|
||||
value=""
|
||||
aria-describedby="inputGroupPrepend03"
|
||||
isInvalid
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>Please choose a username.</CFormFeedback>
|
||||
</CInputGroup>
|
||||
</CCol>
|
||||
<CCol md="6">
|
||||
<CFormLabel htmlFor="validationServer03">City</CFormLabel>
|
||||
<CFormControl type="text" id="validationServer03" isInvalid required />
|
||||
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormLabel htmlFor="validationServer04">City</CFormLabel>
|
||||
<CFormSelect id="validationServer04" isInvalid>
|
||||
<option selected disabled>
|
||||
Choose...
|
||||
</option>
|
||||
<option>...</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback invalid>Please provide a valid city.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol md="3">
|
||||
<CFormLabel htmlFor="validationServer05">City</CFormLabel>
|
||||
<CFormControl type="text" id="validationServer05" isInvalid required />
|
||||
<CFormFeedback invalid>Please provide a valid zip.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CFormCheck
|
||||
type="checkbox"
|
||||
id="invalidCheck"
|
||||
label="Agree to terms and conditions"
|
||||
isInvalid
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>You must agree before submitting.</CFormFeedback>
|
||||
</CCol>
|
||||
<CCol xs="12">
|
||||
<CButton color="primary" type="submit">
|
||||
Submit form
|
||||
</CButton>
|
||||
</CCol>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Validation</strong> <small>Supported elements</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
Validation styles are available for the following form controls and components:
|
||||
</p>
|
||||
<ul class="css-0">
|
||||
<li class="css-0">
|
||||
<code class="css-0"><CFormControl></code>s
|
||||
</li>
|
||||
<li class="css-0">
|
||||
<code class="css-0"><CFormSelect></code>s
|
||||
</li>
|
||||
<li class="css-0">
|
||||
<code class="css-0"><CFormCheck></code>s
|
||||
</li>
|
||||
</ul>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/validation#supported-elements">
|
||||
<CForm validated={true}>
|
||||
<div class="mb-3">
|
||||
<CFormLabel for="validationTextarea" class="form-label">
|
||||
Textarea
|
||||
</CFormLabel>
|
||||
<CFormControl
|
||||
component="textarea"
|
||||
id="validationTextarea"
|
||||
placeholder="Required example textarea"
|
||||
isInvalid
|
||||
required
|
||||
></CFormControl>
|
||||
<CFormFeedback invalid>Please enter a message in the textarea.</CFormFeedback>
|
||||
</div>
|
||||
<CFormCheck
|
||||
className="mb-3"
|
||||
id="validationFormCheck1"
|
||||
label="Check this checkbox"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>Example invalid feedback text</CFormFeedback>
|
||||
|
||||
<CFormCheck
|
||||
type="radio"
|
||||
name="radio-stacked"
|
||||
id="validationFormCheck2"
|
||||
label="Check this checkbox"
|
||||
required
|
||||
/>
|
||||
|
||||
<CFormCheck
|
||||
className="mb-3"
|
||||
type="radio"
|
||||
name="radio-stacked"
|
||||
id="validationFormCheck3"
|
||||
label="Or toggle this other radio"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>More example invalid feedback text</CFormFeedback>
|
||||
|
||||
<div class="mb-3">
|
||||
<CFormSelect required aria-label="select example">
|
||||
<option value="">Open this select menu</option>
|
||||
<option value="1">One</option>
|
||||
<option value="2">Two</option>
|
||||
<option value="3">Three</option>
|
||||
</CFormSelect>
|
||||
<CFormFeedback invalid>Example invalid select feedback</CFormFeedback>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<CFormControl
|
||||
type="file"
|
||||
id="validationTextarea"
|
||||
aria-label="file example"
|
||||
required
|
||||
/>
|
||||
<CFormFeedback invalid>Example invalid form file feedback</CFormFeedback>
|
||||
</div>
|
||||
|
||||
<div class="mb-3">
|
||||
<CButton type="submit" color="primary" disabled>
|
||||
Submit form
|
||||
</CButton>
|
||||
</div>
|
||||
</CForm>
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
<CCol xs={12}>
|
||||
<CCard className="mb-4">
|
||||
<CCardHeader>
|
||||
<strong>Validation</strong> <small>Tooltips</small>
|
||||
</CCardHeader>
|
||||
<CCardBody>
|
||||
<p class="text-medium-emphasis small">
|
||||
If your form layout allows it, you can swap the text for the tooltip to display
|
||||
validation feedback in a styled tooltip. Be sure to have a parent with{' '}
|
||||
<code class="css-0">position: relative</code> on it for tooltip positioning. In the
|
||||
example below, our column classes have this already, but your project may require an
|
||||
alternative setup.
|
||||
</p>
|
||||
<Example href="https://coreui.io/react/docs/4.0/forms/validation#tooltips">
|
||||
{Tooltips()}
|
||||
</Example>
|
||||
</CCardBody>
|
||||
</CCard>
|
||||
</CCol>
|
||||
</CRow>
|
||||
)
|
||||
}
|
||||
|
||||
export default Validation
|
||||
Loading…
Reference in New Issue
Block a user