Semantic-UI Dropdown Disabled State
Last Updated :
17 Mar, 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 “Dropdown”. Dropdowns are used to show different options to users to choose from. Users can select among them as per their choice. Depending on the requirements of the usage of dropdowns there are different states of dropdowns. One of them is the disabled state.
Semantic UI Dropdown Disabled State: The user might need to show a disabled dropdown by default. The user might need to display some dropdowns in UI whose values are not to be changed or the person does not have the access to perform this action. In that case, a disabled state comes in handy. Users can show the dropdown in disabled state and do not grant him to change the state.
Semantic UI Dropdown Disabled State Class:
- disabled: This class is used to set the dropdown status to disabled.
Syntax:
<div class="ui disabled dropdown">
Dropdown <i class="dropdown icon"></i>
<div class="menu">
<div class="item">....</div>
....
</div>
</div>
Example 1: This example demonstrates the entire dropdown disabled using the disabled class. You can see the output in the image below which shows a disabled dropdown. There is no use in defining options as the user will not be able to open the dropdown by clicking on it.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Dropdown Disabled State</title>
<link href=
rel="stylesheet" />
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<br/><br/>
<h2 class="ui header green">GeeksforGeeks</h2>
<b>
<p>Semantic UI Dropdown disabled State</p>
</b>
<hr>
<br />
<strong>Disabled dropdown:</strong><br/><br/>
<div class="ui disabled dropdown">
Dropdown <i class="dropdown icon"></i>
<div class="menu">
<div class="item">Option 1</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
|
Output:
Semantic-UI Dropdown Disabled State
Example 2: There may be a case when some of the options only need to be disabled not the entire dropdown. This example demonstrates the dropdown with disabled options using the disabled class. You can see the disabled options in the dropdown in the image below.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Semantic-UI Dropdown Disabled State</title>
<link href=
rel="stylesheet" />
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<br/><br/>
<h2 class="ui header green">GeeksforGeeks</h2>
<b><p>Semantic UI Dropdown disabled State</p></b>
<hr>
<br/>
<strong>Dropdown with disabled option:</strong>
<br/><br/>
<div class="ui dropdown">
Dropdown <i class="dropdown icon"></i>
<div class="menu">
<div class="item">Option 1</div>
<div class="disabled item">
Wrong option 1
</div>
<div class="item">Option 2</div>
<div class="disabled item">
Wrong option 2
</div>
<div class="item">Option 3</div>
<div class="disabled item">
Wrong option 3
</div>
</div>
</div>
</div>
<script>
$('.ui.dropdown').dropdown();
</script>
</body>
</html>
|
Output:
Semantic-UI Dropdown Disabled State
Reference: https://semantic-ui.com/modules/dropdown.html#disabled
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...