causeway-standard-theme/causeway/docs/components/form-fields/radio-input.html

<div>
  <a id="forms-radio"></a>
  <header class="content-header">
    <h1 class="title">
      Radiobutton
    </h1>
  </header>

  <p>
    Radiobutton controls comprise of a surround and 3 styles, toggled by optional attributes and classes. The attribute should be added to the <code>&lt;input&gt;</code> tag, and classes should follow on from the surrounding <code>&lt;div&gt;</code> and <code>&lt;label&gt;</code>.
  </p>
  <div class="table-wrapper">
    <table class="table table-striped">
    <thead>
      <tr>
        <th>
          Style
        </th>
        <th>
          Attribute
        </th>
        <th>
          Value
        </th>
        <th>
           Example
        </th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td colspan="4">
        </td>
      </tr>
    </tfoot>
    <tbody>
      <tr>
        <td>
          Standard
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group radio">
                <input type="radio" class="form-control" id="radio-field1a" name="radio_field1a" value="">
                <label for="radio-field1a">
                  <span class="radio-icon"></span>
                  Radiobutton
                </label>
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Standard - Label First
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group">
                <div class="control-input radio label-first">
                  <input type="radio" class="form-control" id="radio-field2a" name="radio_field2a" value="">
                  <label for="radio-field2a">
                    <span class="radio-icon"></span>
                    Radiobutton
                  </label>
                </div>
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Standard - Left aligned
        </td>
        <td>
        </td>
        <td>
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group">
                <div class="control-input radio left-aligned">
                  <input type="radio" class="form-control" id="radio-field3a" name="radio_field3a" value="">
                  <label for="radio-field3a">
                    <span class="radio-icon"></span>
                    Radiobutton
                  </label>
                </div>
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Disabled
        </td>
        <td>
          class
          <br/><br/>
          disabled
        </td>
        <td>
          disabled
          <br/><br/>
          disabled
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group radio">
                <input type="radio" class="form-control" id="radio-field1c" name="radio_field1c" value="" checked="checked">
                <label for="radio-field1c" class="checked">
                  <span class="radio-icon"></span>
                  Radiobutton checked
                </label>
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Invalid
        </td>
        <td>
          class
        </td>
        <td>
          invalid
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group radio disabled">
                <input type="radio" disabled="disabled" class="form-control" id="radio-field1d" name="radio_field1d" value="">
                <label for="radio-field1d" class="disabled">
                  <span class="radio-icon"></span>
                  Radiobutton disabled
                </label>
              </div>
            </div>
          </form>
        </td>
      </tr>
      <tr>
        <td>
          Disabled and Checked
        </td>
        <td>
          class
        </td>
        <td>
          disabled checked
        </td>
        <td>
          <form role="form" class="form-horizontal">
            <div class="form-row">
              <div class="form-group radio disabled">
                <input type="radio" disabled="disabled" class="form-control" id="radio-field1e" name="radio_field1d" value="" checked="checked">
                <label for="radio-field1e" class="disabled checked">
                  <span class="radio-icon"></span>
                  Radio button checked and disabled
                </label>
              </div>
            </div>
          </form>
        </td>
      </tr>
    </tbody>
  </table>
  </div>
  <pre>
    <code>
      &lt;div class=&quot;form-group radio&quot;&gt;
        &lt;input type=&quot;radio&quot; class=&quot;form-control&quot; id=&quot;&lt;!-- Input control ID goes here --&gt;&quot; name=&quot;&lt;!-- Input control name goes here --&gt;&quot; value=&quot;&quot;&gt;
        &lt;label for=&quot;&lt;!-- Input control ID goes here --&gt;&quot;&gt;
          &lt;span class=&quot;radio-icon&quot;&gt;&lt;/span&gt;
          &lt;!-- Label text goes here --&gt;
        &lt;/label&gt;
      &lt;/div&gt;
    </code>
  </pre>

  <p>
    Radiobutton controls also can contain custom values as demonstrated below.
  </p>

  <form role="form">
    <div class="row">
      <div class="col-md-4">
        <div class="radio">
          <input type="radio" id="radio-field4a" name="radio_field4a" value="1">
          <label for="radio-field4a">
            <span class="radio-icon"></span>
            Option1
          </label>
        </div>
      </div>
      <div class="col-md-8">
        <input type="text" class="form-control" />
      </div>
    </div>

    <div class="radio invalid">
      <input type="radio" id="radio-field4b" name="radio_field4a" value="2">
      <label for="radio-field4b">
        <span class="radio-icon"></span>
        Option2
      </label>
      <input type="text" class="form-control inline" />
    </div>
    <div class="radio disabled">
      <input type="radio" class="form-control disabled" id="radio-field4c" name="radio_field4a" value="3" disabled="disabled">
      <label for="radio-field4c">
        <span class="radio-icon"></span>
        Option3
      </label>
      <input type="text" class="form-control inline disabled" disabled="disabled" />
    </div>
  </form>

  <pre>
    <code>
      &lt;div class=&quot;form-group radio label-first&quot;&gt;
        &lt;input type=&quot;radio&quot; class=&quot;form-control&quot; id=&quot;&lt;!-- First input control ID goes here --&gt;&quot; name=&quot;&lt;!-- Input control name goes here --&gt;&quot; value=&quot;1&quot;&gt;
        &lt;label for=&quot;&lt;!-- First input control ID goes here --&gt;&quot;&gt;
          &lt;span class=&quot;radio-icon&quot;&gt;&lt;/span&gt;
          &lt;!-- Label text goes here --&gt;
        &lt;/label&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;&lt;!-- Input text control name goes here --&gt;&quot; value=&quot;&quot; /&gt;
      &lt;/div&gt;
      &lt;div class=&quot;form-group radio invalid&quot;&gt;
        &lt;input type=&quot;radio&quot; class=&quot;form-control&quot; id=&quot;&lt;!-- Second input control ID goes here --&gt;&quot; name=&quot;&lt;!-- Input control name goes here --&gt;&quot; value=&quot;2&quot;&gt;
        &lt;label for=&quot;&lt;!-- Second input control ID goes here --&gt;&quot; class=&quot;invalid&quot;&gt;
          &lt;span class=&quot;radio-icon&quot;&gt;&lt;/span&gt;
          &lt;!-- Label text goes here --&gt;
        &lt;/label&gt;
        &lt;input type=&quot;text&quot; class=&quot;form-control&quot; name=&quot;&lt;!-- Input text control name goes here --&gt;&quot; value=&quot;&quot; /&gt;
      &lt;/div&gt;
    </code>
  </pre>
</div>