Reactstrap — Form Validation and Customizations

Image for post
Image for post
Photo by Quinten de Graaf on Unsplash

Reactstrap is a version Bootstrap made for React.

It’s a set of React components that have Boostrap styles.

In this article, we’ll look at how to add form validation and customizations with Reactstrap.

Form Validation

Reactstrap comes with styles for form validation.

We can apply them with the valid and invalid props.

For example, we can add form fields with those styles by writing:

We have various things in this form.

The valid or invalid props are added to Input s to style them according to their validity.

We put the validation feedback in the FormFeedback component.

valid and invalid can also be added to FormFeedback to style them.

tooltip makes the form feedback a tooltip.

Valid inputs will be green.

Invalid inputs will be red.

There’s also an icon on the right side of the input.

Inline Checkboxes

We can add inline checkboxes with the check and inline props.

For example, we can write:

We add both props to the FormGroup to make it inline.

Also, we added the check prop to the Label to make it show the checkbox with Bootstrap styles.

Input Sizing

The sizing of inputs can be changed with the bsSize prop.

For example, we can write:

We can set the value to lg or sm to set the size to large or small respectively.

Input Grid Sizing

We can change the input grid size with the size prop.

For example, we can write:

We have the FormGroup component with the row prop to make them display as rows.

And we have the size prop on the label and bsSize on the input to change the size of them.

Hidden Labels

We can add hidden labels to our form with the hidden prop.

For example, we can write:

to add the hidden props to the labels.

Now we won’t see them.

Conclusion

We can add styles form validation.

Also, hidden labels can be added and sizes can be changed with props.

Written by

Web developer. Subscribe to my email list now at http://jauyeung.net/subscribe/. Email me at hohanga@gmail.com

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store