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 predefined CSS and jQuery to incorporate different frameworks.
Semantic-UI Checkbox states offer us different states of checkboxes, so we can use different states of checkboxes during our development. Below all 4 states of checkboxes are mentioned and described well.
Semantic UI Checkbox Status class:
- read-only: This class is used to create a read-only checkbox.
- checked: This class is used to create an already checked checkbox.
- intermediate: This class is used to create a normal checkbox.
- disabled: This class is used to create a disabled checkbox.
Syntax:
<div class="ui checkbox-status-class">
Below example illustrate the Semantics UI Checkbox States:
Example:
HTML
<!DOCTYPE html> < html >
< head >
< title >Semantic UI</ title >
< link href =
rel = "stylesheet" />
</ head >
< body >
< center >
< h1 >Geeksforgeeks</ h1 >
< strong >Semantic UI Checkbox Status</ strong >
</ center >
< br >< br >
< hr >
< strong >Semantic-UI Checkbox-Status:</ strong >
< br >< br >
< div class = "ui grid" >
< strong >Read-only Checkbox:</ strong >
< div class = "four wide column" >
< div class = "ui read-only checkbox" >
< input type = "checkbox" >
< label >Accept terms and conditions</ label >
</ div >
</ div >
< strong >Checked Checkbox:</ strong >
< div class = "four wide column" >
< div class = "ui checked checkbox" >
< input type = "checkbox" name = "example"
checked = "" >
< 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 >Disabled Checkbox:</ strong >
< div class = "four wide column" >
< div class = "ui checkbox disabled" >
< input type = "checkbox" name = "example" >
< label >Accept terms and conditions</ label >
</ div >
</ div >
</ div >
</ body >
</ html >
|
Output: