Semantic-UI Checkbox Disabled State

Last Updated : 13 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.

Semantic UI Checkbox Disabled State: This state is used in situations when the user might need to display checkboxes whose values are not to be changed or the user does not have the required access to perform that action. In that case, the disabled state comes in handy. Users can be shown the checkbox in a disabled state and they are not able to change the value of the checkbox.

Semantic-UI Checkbox Disabled State Class:

disabled: This class is used to display the checkbox in a disabled state and also prevent the changing of the value.

Syntax:

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

Example: This example demonstrates the Checkbox Disabled State using the disabled 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">
      <h2 style="color:green">
        GeeksforGeeks
      </h2>
      <p><b>Semantic UI Checkbox Disabled State</b></p>
      <hr>
      <br />
      <strong>Disabled Checkboxes:</strong><br /><br />
      <div class="ui form">
         <div class="inline fields">
            <div class="field">
               <div class="ui checkbox disabled">
                  <input type="checkbox" 
                         disabled="disabled" checked="">
                  <label>Disabled checked checkbox</label>
               </div>
            </div>
            <div class="read-only field">
               <div class="ui checkbox disabled checked">
                  <input type="checkbox" 
                         disabled="disabled">
                  <label>Disabled unchecked checkbox</label>
               </div>
            </div>
         </div>
      </div>
   </div>
</body>
</html>