React Bootstrap Form Check and Radios

React-Bootstrap is a front-end framework mainly customized for React. It provides various components to build responsive and visually appealing user interfaces for react applications. Form Check and Radio components are used in handling form inputs.

Check and Radio buttons are both elements for making selections. The main difference between the two is that radio buttons are used to select one item from a list of several predefined items and checkboxes allow the user to choose items from a fixed number of alternatives.

Syntax:

import Form from 'react-bootstrap/Form';

 <Form>
          <Form.Check  type="checkbox" />
          <Form.Check  type="radio" />
</Form>

Form.Check Props:

• type: It specifies the type of the input, It can be either “checkbox“, “switch” or “radio“.
• name: It is a name of the input. This is particularly important when using radio buttons to group them together.
• label: It is a label text associated with the input.
• id: It is used to uniquely identify a element.
• value: It is used to set value of the input.
• checked: It indicates whether the input should be checked.
• disabled: It is used to disable the input field.
• inline: the input will be displayed inline with other elements.
• onChange: It is a callback function, fired when you choose checkbox or radio data.

Creating React Application And Installing Module:

Step 1: Create a React application using the following command.

npx create-react-app gfg

Step 2: After creating your project folder i.e. gfg, move to it using the following command.

cd gfg

Step 3: After creating the react application, Install the required modules using the following command.

npm install react-bootstrap bootstrap

Step 4: Add the below line in src/index.js file.

import 'bootstrap/dist/css/bootstrap.css';

Project Structure:

Project Structure

The updated dependencies in package.json file will look like:

"dependencies": {
    "@testing-library/jest-dom": "^5.17.0",
    "@testing-library/react": "^13.4.0",
    "@testing-library/user-event": "^13.5.0",
    "bootstrap": "^5.3.2",
    "react": "^18.2.0",
    "react-bootstrap": "^2.9.2",
    "react-dom": "^18.2.0",
    "react-scripts": "5.0.1",
    "web-vitals": "^2.1.4"
}

Example 1: In this example we will see Default Check Box and Radios.

Javascript

//src/App.js

import { Form } from 'react-bootstrap';
import './App.css';

function App() {
    return (
        <div className='m-3'>
            <h3>GeeksForGeeks | Default Form Check and Radios Example</h3>
            {/* Check Box */}
            <div className='m-2'>
                <h4>Check Box</h4>
                <Form>
                    <label>Choose Items:   </label>
                    <Form.Check
                        type="checkbox"
                        label="Cake" />

                    <Form.Check
                        type="checkbox"
                        label="Chocalate" />

                    <Form.Check
                        type="checkbox"
                        label="Ice Cream" />
                </Form>
            </div>

            {/* Radio Button */}
            <div className='m-2'>
                <h4>Radios</h4>
                <Form>
                    <label>Choose Gender:   </label>
                    <Form.Check
                        type="radio"
                        label="Male"
                        name="Gender" />

                    <Form.Check
                        type="radio"
                        label="Female"
                        name="Gender" />
                </Form>
            </div>
        </div>
    );
}

export default App;

Output:

Default-Form-Check-and-Radios

Example 2: In this example we will see Inline Check Box and Radios.

Javascript

// src/App.js
import { Form } from 'react-bootstrap';
import './App.css';

function App() {
    return (
        <div className='m-3'>
            <h3>GeeksForGeeks | Inline Form Check and Radios Example</h3>
            {/* Check Box */}
            <div className='m-2'>
                <h4>Check Box</h4>
                <Form>
                    <label>Choose Items:   </label>
                    <Form.Check
                        inline
                        type="checkbox"
                        label="Item 1" />

                    <Form.Check
                        inline
                        type="checkbox"
                        label="Item 2" />

                    <Form.Check
                        inline
                        type="checkbox"
                        label="Item 3" />
                </Form>
            </div>

            {/* Radio Button */}
            <div className='m-2'>
                <h4>Radios</h4>
                <Form>
                    <label>Choose Items:   </label>
                    <Form.Check
                        inline
                        type="radio"
                        label="Item 1"
                        name="Items" />

                    <Form.Check
                        inline
                        type="radio"
                        label="Item 2"
                        name="Items" />
                </Form>
            </div>
        </div>
    );
}

export default App;

Output:

Inline-Form-Check-and-Radios

Example 3: In this example we will see Enabled and Disabled Check Box and Radios.

Javascript

// src/App.js
import { Form } from 'react-bootstrap';
import './App.css';

function App() {
    return (
        <div className='m-3'>
            <h3>GeeksForGeeks | Enabled and Disabled Form Check and Radios Example</h3>
            {/* Check Box */}
            <div className='m-2'>
                <h4>Check Box</h4>
                <Form>
                    <label>Choose Items:   </label>
                    <Form.Check
                        enabled
                        type="checkbox"
                        label="Item 1" />

                    <Form.Check
                        disabled
                        type="checkbox"
                        label="Item 2" />
                </Form>
            </div>

            {/* Radio Button */}
            <div className='m-2'>
                <h4>Radios</h4>
                <Form>
                    <label>Choose Items:   </label>
                    <Form.Check
                        enabled
                        type="radio"
                        label="Item 1"
                        name="Items" />

                    <Form.Check
                        disabled
                        type="radio"
                        label="Item 2"
                        name="Items" />
                </Form>
            </div>
        </div>
    );
}

export default App;

Output:

Enabled-and-Disabled-Form-Check-and-Radios