Semantic-UI Form Grouped Fields Variation
Last Updated :
14 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. It uses a class to add CSS to the elements.
A form is the section of a document that contains a number of input fields such as text field, password, checkbox, etc. Semantic-UI form is used to create attractive forms using semantic-UI classes. It is very easy to design attractive forms.
The Semantic-UI Form Grouped Fields Variation is used to display the related choices of the element. It works similarly to the radio button.
Semantic-UI Form Grouped Fields Variation Used Class:
- grouped fields: This class is used to display the related choices of the elements.
Syntax:
<div class="ui form">
<div class="grouped fields">
...
</div>
...
</div>
Example 1: In this example, we will describe the use of Semantic-UI Form Grouped Fields Variation.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
Semantic-UI Form Grouped Fields Variation
</ title >
< link href =
rel = "stylesheet" />
< script src =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< h3 >Semantic-UI Form Grouped Fields Variation</ h3 >
</ div >
< br >
< div class = "ui form container" >
< h4 >Select Subject:</ h4 >
< div class = "grouped fields" >
< div class = "field" >
< div class = "ui radio checkbox" >
< input type = "radio"
name = "GFG"
tabindex = "0"
class = "hidden" >
< label >HTML</ label >
</ div >
</ div >
< div class = "field" >
< div class = "ui radio checkbox" >
< input type = "radio"
name = "GFG"
tabindex = "0"
class = "hidden" >
< label >CSS</ label >
</ div >
</ div >
< div class = "field" >
< div class = "ui radio checkbox" >
< input type = "radio"
name = "GFG"
tabindex = "0"
class = "hidden" >
< label >JavaScript</ label >
</ div >
</ div >
< div class = "field" >
< div class = "ui radio checkbox" >
< input type = "radio"
name = "GFG"
tabindex = "0"
class = "hidden" >
< label >Bootstrap</ label >
</ div >
</ div >
< div class = "field" >
< div class = "ui radio checkbox" >
< input type = "radio"
name = "GFG"
tabindex = "0"
class = "hidden" >
< label >Node.js</ label >
</ div >
</ div >
</ div >
</ div >
< script >
$('.ui.radio.checkbox').checkbox();
</ script >
</ body >
</ html >
|
Output:
Semantic-UI Form Grouped Fields Variation
Example 2: In this example, we will describe the use of Semantic-UI Form Grouped Fields Variation with Inverted variation.
HTML
<!DOCTYPE html>
< html >
< head >
< title >
Semantic-UI Form Grouped Fields Variation
</ title >
< link href =
rel = "stylesheet" />
< script src =
integrity =
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin = "anonymous" >
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "ui container" >
< h2 style = "color:green" >
GeeksforGeeks
</ h2 >
< h3 >Semantic-UI Form Grouped Fields Variation</ h3 >
</ div >
< br >
< div class = "ui inverted segment" >
< div class = "ui form inverted container" >
< h4 >Select Subject:</ h4 >
< div class = "grouped fields" >
< div class = "field" >
< div class = "ui radio checkbox" >
< input type = "radio"
name = "GFG"
tabindex = "0"
class = "hidden" >
< label >HTML</ label >
</ div >
</ div >
< div class = "field" >
< div class = "ui radio checkbox" >
< input type = "radio"
name = "GFG"
tabindex = "0"
class = "hidden" >
< label >CSS</ label >
</ div >
</ div >
< div class = "field" >
< div class = "ui radio checkbox" >
< input type = "radio"
name = "GFG"
tabindex = "0"
class = "hidden" >
< label >JavaScript</ label >
</ div >
</ div >
< div class = "field" >
< div class = "ui radio checkbox" >
< input type = "radio"
name = "GFG"
tabindex = "0"
class = "hidden" >
< label >Bootstrap</ label >
</ div >
</ div >
< div class = "field" >
< div class = "ui radio checkbox" >
< input type = "radio"
name = "GFG"
tabindex = "0"
class = "hidden" >
< label >Node.js</ label >
</ div >
</ div >
</ div >
</ div >
</ div >
< script >
$('.ui.radio.checkbox').checkbox();
</ script >
</ body >
</ html >
|
Output:
Semantic-UI Form Grouped Fields Variation
Reference: https://semantic-ui.com/collections/form.html#grouped-fields
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...