Inline
Creating inline radio buttons and checkboxes in React-Bootstrap is a straightforward way to display options side by side, which can be really handy when you want to conserve vertical space and create a more compact form or survey.
Syntax:
<Form>
<Form.Check
inline
type="radio" />
<Form/>
Example: Here’s an example of how to create Inline radio buttons and checkboxes using React-Bootstrap:
Javascript
import React from 'react';import { Form } from 'react-bootstrap';import './App.css'function App() { return ( <div className="outer"> <div className='App'> <h2 className='h2'> Inline Radio Buttons </h2> <Form> <Form.Check inline type="radio" label="Option 1" name="inlineRadioOptions" id="inlineRadio1" /> <Form.Check inline type="radio" label="Option 2" name="inlineRadioOptions" id="inlineRadio2" /> <Form.Check inline disabled type="radio" label="Option 3 (Disabled)" name="inlineRadioOptions" id="inlineRadio3" /> </Form> <h2 className='h2'> Inline Checkboxes </h2> <Form> <Form.Check inline type="checkbox" label="Checkbox 1" id="inlineCheckbox1" /> <Form.Check inline type="checkbox" label="Checkbox 2" id="inlineCheckbox2" /> <Form.Check inline disabled type="checkbox" label="Checkbox 3 (Disabled)" id="inlineCheckbox3" /> </Form> </div> </div> );}export default App; |
CSS
.outer { display: flex; align-items: center; justify-content: center; background-color: #152128f0; height: 100vh; color: rgb(191, 210, 210);}.App .h2 { color: rgb(57, 217, 231);} |
Output:
Output
React-Bootstrap Checks Radios
In this article, we’ll learn about React-Bootstrap’s Checks and Radio components. Checks and Radios, in the context of React-Bootstrap, are specialized components tailored for managing user selections, with a primary focus on checkboxes and radio buttons.
Contact Us