React Form Input Component
Form control
React input components. Give textual form `<input>`s an upgrade with custom styles, sizing, focus states, validation, and more.
Available in Other JavaScript Frameworks
CoreUI React Form Input Component is also available for Angular, Bootstrap, and Vue. Explore framework-specific implementations below:
Example#
If you need to add custom classNames to form's components, or need to add some custom elements you can add each form component separately. Please check the example below.
<CForm> <CFormLabel htmlFor="exampleFormControlInput1">Email address</CFormLabel> <CFormInput type="email" id="exampleFormControlInput1" placeholder="[email protected]" aria-describedby="exampleFormControlInputHelpInline" /> <CFormText as="span" id="exampleFormControlInputHelpInline"> Must be 8-20 characters long. </CFormText></CForm>Sizing#
Set heights using size property like size="lg" and size="sm".
Disabled#
Add the disabled boolean attribute on an input to give it a grayed out appearance and remove pointer events.
Readonly#
Add the readOnly 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.
Readonly plain text#
If you want to have <input readonly> elements in your form styled as plain text, use the plainText boolean property to remove the default form field styling and preserve the correct margin and padding.
File input#
Color#
API#
Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.