Semantic-UI Checkbox Types
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:
Syntax:
<div class="ui checkbox-types-class">
Below example illustrate the Semantics UI Checkbox Types:
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 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