ReactJS Semantic UI Checkbox Module
Last Updated :
22 Jun, 2021
Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks.
In this article, we will know how to use Checkbox Module in ReactJS Semantic UI. Checkbox Module allows a user to select a value from a small set of options.
Properties:
- Toggle: We can use checkbox as a toggle.
- Slider: We can use checkbox as a Slider.
- Radio: We can use checkbox as a radio element.
- Radio Group: We can use checkbox as a radio group.
States:
- Read Only: We can make checkbox as read only element using this state.
- Checked: We can make checkbox as pre checked using this state.
- Indeterminate: We can use make checkbox which indeterminate state.
- Disabled: We can make checkbox as disabled using disabled state.
Syntax:
<Checkbox />
Creating React Application And Installing Module:
- Step 1: Create a React application using the following command.
npx create-react-app foldername
- Step 2: After creating your project folder i.e. foldername, move to it using the following command.
cd foldername
- Step 3: Install semantic UI in your given directory.
npm install semantic-ui-react semantic-ui-css
Project Structure: It will look like the following.
Step to Run Application: Run the application from the root directory of the project, using the following command.
npm start
Example 1: In this example, we are using a basic checkbox element using ReactJS Semantic UI Checkbox Module.
App.js
import React from 'react'
import { Checkbox } from 'semantic-ui-react'
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
const btt = () => (
<div>
<div style={{
display: 'block', width: 700, padding: 30
}}>
<br />
<br />
<Checkbox label='GeeksforGeeks' />
<br />
<br />
<Checkbox toggle label='GeeksforGeeks' />
<br />
<br />
<Checkbox slider label='GeeksforGeeks' />
<br />
<br />
<Checkbox radio label='GeeksforGeeks' />
</div>
</div>
)
export default btt
Output:
Example 2: In this example, we are showing the checkboxes as checked by default by using ReactJS Semantic UI Checkbox Module.
App.js
import React from 'react'
import { Checkbox } from 'semantic-ui-react'
const styleLink = document.createElement("link");
styleLink.rel = "stylesheet";
styleLink.href =
"https://cdn.jsdelivr.net/npm/semantic-ui/dist/semantic.min.css";
document.head.appendChild(styleLink);
const btt = () => (
<div>
<div style={{
display: 'block', width: 700, padding: 30
}}>
<br />
<br />
<Checkbox label='GeeksforGeeks' defaultChecked />
<br />
<br />
<Checkbox toggle label='GeeksforGeeks' defaultChecked />
<br />
<br />
<Checkbox slider label='GeeksforGeeks' defaultChecked />
<br />
<br />
<Checkbox radio label='GeeksforGeeks' defaultChecked />
</div>
</div>
)
export default btt
Output:
Reference: https://react.semantic-ui.com/modules/checkbox
Similar Reads
ReactJS Semantic UI Modal Module Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks. In this article, we will see how to use Modal Module in ReactJS S
2 min read
ReactJS Semantic UI Dropdown Module Semantic UI is a modern framework used in developing seamless designs for the website, Its gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks. In this article we see know how to use Dropdown Module in ReactJ
3 min read
Semantic-UI Checkbox Read-only State Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI has a bunch of components for user interface design. One of them is âChec
2 min read
Semantic-UI Form Checkbox Content Semantic UI is the open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsiv
2 min read
Semantic-UI Checkbox Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS and jQuery to incorporate in different frameworks. Semantic UI offers us checkbox too use checkboxes, we can apply the inp
3 min read
ReactJS Semantic UI Form collections Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks.In this article, we will know how to use form collections in React
3 min read