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 : #152128 f 0 ; height : 100 vh; color : rgb ( 191 , 210 , 210 ); } .App .h 2 { color : rgb ( 57 , 217 , 231 ); } |
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.