Semantic-UI Form Radio Checkbox Content

Last Updated : 10 Mar, 2022

Semantic UI is the open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive website.

The form is a container that has different types of input elements such as text fields, submit buttons, radio buttons, checkboxes, etc.

Semantic-UI Form is used to create the beautiful form using form classes. Form Radio Checkbox Content is used to create the radio checkboxes to select the option from the set of options. We will use radio class to create the radio checkbox. In this article, we will discuss Form Radio Checkbox Content in Semantic-UI.

Semantic-UI Form Radio Checkbox Content Class:

radio: This class is used to create the radio checkbox.

Syntax:

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

Example 1: The following code demonstrates the Semantic-UI Form Radio Checkbox Content in the horizontal direction.

HTML

<!DOCTYPE html>
<html>

<head>
    <title>Semantic-UI Form Radio Checkbox Content</title>
    <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
          rel="stylesheet" />
    <script src=
        "https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>

<body>
    <h2 style="color: green">
        GeeksforGeeks
    </h2>

    <h3>Semantic-UI Form Radio Checkbox Content</h3>

    <div class="ui form">
        <div class="inline fields">
            <label for="radio-box">
                Select your option:
            </label>

            <div class="field">
                <div class="ui radio checkbox">
                    <input type="radio"
                           name="radio-box"
                           checked="" 
                           tabindex="0" 
                        class="hidden">
                    <label>Radio 1</label>
                </div>
            </div>

            <div class="field">
                <div class="ui radio checkbox">
                    <input type="radio"
                           name="radio-box"
                           tabindex="0" 
                           class="hidden">
                    <label>Radio 2</label>
                </div>
            </div>

            <div class="field">
                <div class="ui radio checkbox">
                    <input type="radio" 
                           name="radio-box"
                           tabindex="0"
                           class="hidden">
                    <label>Radio 3</label>
                </div>
            </div>
        </div>
    </div>

    <script>
        $('.ui.radio.checkbox').checkbox();
    </script>
</body>

</html>

Output:

Example 2: The following code demonstrates the Semantic-UI Form Radio Checkbox Content in the vertical direction.

HTML

<!DOCTYPE html>
<html>

<head>
  <title>Semantic-UI Form Radio Checkbox Content</title>
  <link href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet"/>

  <script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
  </script>

  <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
  </script>

</head>

<body>

  <h2 style="color: green">
    GeeksforGeeks
  </h2>

  <h3>
    Semantic-UI Form Radio Checkbox Content
  </h3>

  <div class="ui form">
    <div class="grouped fields">

      <label for="radio-box">
        Select your option:
      </label>

      <div class="field">
        <div class="ui radio checkbox">
          <input type="radio" 
                 name="radio-box" 
                 checked=""
                 tabindex="0" 
                 class="hidden">
          <label>
            Radio 1
          </label>
        </div>
      </div>

      <div class="field">
        <div class="ui radio checkbox">
          <input type="radio" 
                 name="radio-box" 
                 tabindex="0" 
                 class="hidden">
          <label>
            Radio 2
          </label>
        </div>
      </div>

      <div class="field">
        <div class="ui radio checkbox">
          <input type="radio"
                 name="radio-box" 
                 tabindex="0"
                 class="hidden">
          <label>
            Radio 3
          </label>
        </div>
      </div>

    </div>
  </div>

  <script>
    $('.ui.radio.checkbox').checkbox();
  </script>

</body>

</html>