Semantic-UI Checkbox States
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 = "https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" rel = "stylesheet" /> </ head > < body > < center > < h1 >w3wiki</ 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:
Contact Us