React Bootstrap — Form Groups, Checkboxes, Radio Buttons, and Range Inputs

Image for post
Image for post
Photo by Vivek Doshi on Unsplash

React Bootstrap is one version of Bootstrap made for React.

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

In this article, we’ll look at how to add forms to a React app with React Bootstrap.

Readonly Plain Text

We can add the plaintext prop to make our read-only elements styled as plain text.

For instance, we can write:

With the plaintext prop, we won’t get any borders or shadows with the form control.

Range Inputs

React Bootstrap comes with a range input slider.

To add it, we just set the type prop to 'range' .

For example, we can write:

We just set the type to 'range' on the Form.Control .

Checkboxes and Radios

We can checkboxes and radios with the Form.Check component.

We just set the type prop on it to set it as a checkbox or a radio button.

For example, we can write:

We set the checkbox and radio as value of the type prop to make Form.Check render a checkbox or a radio button.

Inline Checkbox or Radio Buttons

We can make our checkbox and radio buttons display inline with the inline prop.

For example, we can write:

We add the inline prop to the Form.Check component to make them display inline.

Checkbox and Radio Buttons Without Labels

The label prop is an option prop of the Form.Check component.

We can write:

to render the checkbox and radio button without labels.

Customizing FormCheck Rendering

We can set the validation state of the checkbox.

If we add the isValuid prop to the Form.Check.Input component, then everything will be displayed in green.

For instance, we can write:

We have the Form.Check component with more components inside it.

The Form.Check.Input component has the checkbox or radio button itself.

isValid indicates that the input value is valid and it’s displayed in green.

Form.Check.Label has the label for the checkbox or radio button.

Form.Control.Feedback lets us display validation feedback.

type='valid' indicates that it’s a valid input.

Form Groups

Form groups let us create a layout for form controls.

For instance, we can write:

to add form groups to our forms.

The Form.Label is displayed above the Form.Control in each group.

Form.Group separate the inputs into their own rows.

Conclusion

We can add read-only text inputs.

There are many ways to add checkboxes and radio buttons.

Form groups let us add layout form control components.

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