Semantic-UI Checkbox Radio Type

Last Updated : 21 Feb, 2022

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 “Checkboxes”. Checkboxes are used to show different options for the users to choose from. Users can select among them as per their choice. There are different types of checkboxes based on their shape and style. One of them is the radio type.

Semantic UI Checkbox Radio Type is used to make the checkbox in the form of a radio button that can be used by the user to select a true or false value. It adds a different look than the default checkbox.

Semantic-UI Checkbox Radio Type Class:

radio: This class is used to display the checkbox in the form of a radio.

Syntax:

<div class="ui radio checkbox">
   <input type="checkbox">
   <label>...</label>
</div>

Example 1: This example demonstrates a checkbox radio type with a single choice using the radio class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
   <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
</head> 
  
<body> 
   <div class="ui container"> 
      <br /><br /> 
      <h2 style="color:green"> 
        GeeksforGeeks 
      </h2> 
      <b> 
         <p>Semantic UI Checkbox Radio Type</p> 
      </b> 
      <hr> 
      <br /> 
      <strong>Radio Checkboxes:</strong> 
      <br /><br /> 
      <div class="ui radio checkbox"> 
         <input type="checkbox" name="public"> 
         <label> 
           Subscribe to GFG weekly newsletters .   
        </label> 
      </div> 
   </div> 
</body> 
</html>

Output:

Radio Checkbox

Example 2: This example demonstrates a checkbox radio type with multiple choices using the radio class.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
   <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
</head> 
  
<body> 
   <div class="ui container"> 
      <br /><br /> 
      <h2 style="color:green"> 
        GeeksforGeeks 
      </h2> 
      <b> 
         <p>Semantic UI Checkbox Radio Type</p> 
      </b> 
      <hr> 
      <br /> 
      <strong>Radio Checkboxes:</strong> 
      <br /><br /> 
      <div class="ui form"> 
         <div class="grouped fields"> 
           <label>How often do you visit Geeks for Geeks?</label> 
           <div class="field"> 
             <div class="ui radio checkbox"> 
               <input type="radio" name="frequency" checked="checked"> 
               <label>Once a day .</label> 
             </div> 
           </div> 
           <div class="field"> 
             <div class="ui radio checkbox"> 
               <input type="radio" name="frequency"> 
               <label>Twice a day .</label> 
             </div> 
           </div> 
           <div class="field"> 
             <div class="ui radio checkbox"> 
               <input type="radio" name="frequency"> 
               <label>2-3 times a week .</label> 
             </div> 
           </div> 
           <div class="field"> 
             <div class="ui radio checkbox"> 
               <input type="radio" name="frequency"> 
               <label>Once a week .</label> 
             </div> 
           </div> 
         </div> 
       </div> 
   </div> 
</body> 
</html>