React floating label component. Create beautifully simple form labels that float over your input fields.
Use floatingLabel
property on <CFormInput>
, <CFormSelect>
or <CFormTextarea>
to enable floating labels with textual form fields. A placeholder
is required on each <CFormInput>
, <CFormSelect>
and <CFormTextarea>
as our method of CSS-only floating labels uses the :placeholder-shown
pseudo-element.
1<CFormInput type="email" id="floatingInput" floatingLabel="Email address" placeholder="[email protected]" />2<CFormInput type="password" id="floatingPassword" floatingLabel="Password" placeholder="Password" />
You can create the same form control by wrapping a pair of <CFormInput>
and <CFormLabel>
elements in <CFormFloating>
to enable floating labels with textual form fields. A placeholder
is required on each <CFormInput>
as our method of CSS-only floating labels uses the :placeholder-shown
pseudo-element. Also, note that the <CFormInput>
must come first so we can utilize a sibling selector (e.g., ~
).
1<CFormFloating className="mb-3">3 <CFormLabel htmlFor="floatingInput">Email address</CFormLabel>4</CFormFloating>5<CFormFloating>6 <CFormInput type="password" id="floatingPassword" placeholder="Password" />7 <CFormLabel htmlFor="exampleFormControlTextarea1">Password</CFormLabel>8</CFormFloating>
When there's a value
already defined, <CFormLabel>
s will automatically adjust to their floated position.
1<CFormInput2 type="email"3 id="floatingInputValue"4 floatingLabel="Input with value"7/>
Form validation styles also work as expected.
1<CFormInput2 type="email"3 id="floatingInputInvalid"4 floatingLabel="Email addresss"7 valid8/>9<CFormInput10 type="email"11 id="floatingInputInvalid"12 floatingLabel="Email addresss"15 invalid16/>
By default, <CFormTextarea>
s will be the same height as <CFormInput>
s.
1<CFormTextarea2 id="floatingTextarea"3 floatingLabel="Comments"4 placeholder="Leave a comment here"5></CFormTextarea>6</CFormFloating>
To set a custom height on your <CFormTextarea>
, do not use the rows
attribute. Instead, set an explicit height
(either inline or via custom CSS).
1<CFormTextarea2 placeholder="Leave a comment here"3 id="floatingTextarea2"4 floatingLabel="Comments"5 style={{ height: '100px' }}6></CFormTextarea>
Other than <CFormInput>
, floating labels are only available on <CFormSelect>
s. They work in the same way, but unlike <CFormInput>
s, they'll always show the <CFormLabel>
in its floated state. Selects with size
and multiple
are not supported.
1<CFormSelect2 id="floatingSelect"3 floatingLabel="Works with selects"4 aria-label="Floating label select example"5>6 <option>Open this select menu</option>7 <option value="1">One</option>8 <option value="2">Two</option>9 <option value="3">Three</option>10</CFormSelect>
When working with the CoreUI for Bootstrap grid system, be sure to place form elements within column classes.
1<CRow xs={{ gutter: 2 }}>2 <CCol md>3 <CFormInput4 type="email"5 id="floatingInputGrid"6 floatingLabel="Email address"9 />10 </CCol>11 <CCol md>12 <CFormSelect13 id="floatingSelectGrid"14 floatingLabel="Email address"15 aria-label="Works with selects"16 >17 <option>Open this select menu</option>18 <option value="1">One</option>19 <option value="2">Two</option>20 <option value="3">Three</option>21 </CFormSelect>22 </CCol>23</CRow>
1import { CFormFloating } from '@coreui/react'2// or3import CFormFloating from '@coreui/react/src/components/form/CFormFloating'
Property | Description | Type | Default |
---|---|---|---|
className | A string of all className you want applied to the component. | string | - |