Onsen UI Segment CSS Components Last Updated : 23 Jul, 2025 Comments Improve Suggest changes Like Article Like Report Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. The segment is used to create a group of related content. Onsen UI CSS Segment is used to create the segment using the below classes. Onsen UI CSS Component Basic Segment Classes: segment: This class is used to create the segment.segment__item: This class is used to create the segment item.segment__input: This class is used to create the segment input.segment__button: This class is used to create the segment buttons. Onsen UI CSS Component Material Segment Classes: segment–material: This class is used to create the material segment.segment–material__item: This class is used to create the material segment item.segment–material__input: This class is used to create the material segment input.segment–material__button: This class is used to create the material segment button. Syntax: <div class="segment">...</div> Example 1: The following example demonstrates the Onsen UI CSS Component Segment. HTML <!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <link rel="stylesheet" href= "https://unpkg.com/[email protected]/css/onsenui.css"> <link rel="stylesheet" href= "https://unpkg.com/[email protected]/css/onsen-css-components.min.css"> <script src= "https://unpkg.com/[email protected]/js/onsenui.min.js"> </script> <style> body{ background-color:lightgreen; } </style> </head> <body> <center> <h2 style="color: green;"> GeeksforGeeks </h2> <strong> Onsen UI CSS Component Segment </strong> <br> <br> <div class="segment" style="width:120px;"> <div class="segment__item"> <input type="checkbox" class="segment__input"> <div class="segment__button"> DSA </div> </div> <div class="segment__item segment__item"> <input type="checkbox" class="segment__input"> <div class="segment__button"> Project </div> </div> </div> </center> </body> </html> Output: Example 2: The following example demonstrates the Onsen UI CSS Component Segment. HTML <!DOCTYPE html> <html> <head> <!-- CDN links of Onsen UI library --> <link rel="stylesheet" href= "https://unpkg.com/[email protected]/css/onsenui.css"> <link rel="stylesheet" href= "https://unpkg.com/[email protected]/css/onsen-css-components.min.css"> <script src= "https://unpkg.com/[email protected]/js/onsenui.min.js"> </script> <style> body{ background-color:lightgreen; } </style> </head> <body> <center> <h2 style="color:green;"> GeeksforGeeks </h2> <strong> Onsen UI CSS Component Segment </strong> <br> <br> <div class="segment" style="width:120px;"> <div class="segment__item"> <input type="checkbox" class="segment__input"> <div class="segment__button"> 1 </div> </div> <div class="segment__item"> <input type="checkbox" class="segment__input"> <div class="segment__button"> 2 </div> </div> <div class="segment__item"> <input type="checkbox" class="segment__input"> <div class="segment__button"> 3 </div> </div> <div class="segment__item"> <input type="checkbox" class="segment__input"> <div class="segment__button"> 4 </div> </div> </div> </center> </body> </html> Output: Reference: https://onsen.io/v2/api/css.html#segment-category Comment More infoAdvertise with us Next Article Onsen UI CSS Component Toolbar with Segment K krishna_97 Follow Improve Article Tags : Web Technologies CSS Onsen-UI Onsen-UI CSS-Components Similar Reads Onsen UI CSS Component Basic Segment Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. The segment is used to create a group of related content. Onsen UI CSS Component Basic Segment is used to create the basi 2 min read Onsen UI CSS Component Material Segment Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. The segment is used to create a group of related content. Onsen UI CSS Component Material Segment is used to create the m 2 min read Onsen UI CSS Component Segment Button Bar Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. The segment is used to create a group of related content. Onsen UI CSS Component Segment Button Bar is used to create the 2 min read Onsen UI CSS Component Toolbar with Segment Onsen UI CSS is used to create beautiful HTML components. It is one of the most efficient ways to create HTML5 hybrid components that are compatible with both mobile and desktop. In this article, we will see the Onsen UI CSS Component Toolbar with Segment. The toolbar is a horizontal bar with some t 2 min read Onsen UI Toolbar CSS Components Onsen UI is an open-source, free tool for building distinctive and functional UIs. Additionally, it speeds up UI creation, letting app developers concentrate on the functionality of the software. Onsen UI is a sizable collection of strong user interface elements created especially for mobile apps. I 4 min read ReactJS Onsen UI Segment Component ReactJS Onsen-UI is a popular front-end library with a set of React components that are designed to developing HTML5 hybrid and mobile web apps in a beautiful and efficient way. Segment Component allows the user to toggle between a different number of options in a row. We can use the following appro 2 min read Like