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 Checkbox types offers us different types of checkbox, so we can use different types of checkboxes during our development. Below all the 4 types of checkboxes are mentioned and described well.
Semantic UI Checkbox Types class:
- checkbox: This class is used to create normal checkbox.
- radio: This class is used to create radio checkbox.
- toggle: This class is used to create toggle checkbox.
- slider: This class is used to create slider checkbox.
Syntax:
<div class="ui checkbox-types-class">
Below example illustrate the Semantics UI Checkbox Types:
Example:
<!DOCTYPE html> < html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< center >
< h1 >Geeksforgeeks</ h1 >
< strong >Semantic UI Checkbox Types</ strong >
</ center >
< br >< br >
< hr >
< strong >Semantic-UI Checkbox-Types:</ strong >
< br >< br >
< div class = "ui grid" >
< strong >Radio Checkbox:</ strong >
< div class = "four wide column" >
< div class = "ui radio checkbox" >
< input type = "radio" name = "radio" >
< label >Accept terms and conditions</ label >
</ div >
</ div >
< strong >Checkbox:</ strong >
< div class = "four wide column" >
< div class = "ui checkbox" >
< input type = "checkbox" name = "example" >
< label >Accept terms and conditions</ label >
</ div >
</ div >
< strong >Slider Checkbox:</ strong >
< div class = "four wide column" >
< div class = "ui slider checkbox" >
< input type = "checkbox" name = "newsletter" >
< label >Accept terms and conditions</ label >
</ div >
</ div >
< strong >Toggle Checkbox:</ strong >
< div class = "four wide column" >
< div class = "ui toggle checkbox" >
< input type = "checkbox" name = "public" >
< label >Accept terms and conditions</ label >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output:
Reference: https://semantic-ui.com/modules/checkbox.html