Radio buttons can be used to allow users to select only one of a predefined set of mutually exclusive options. Halfmoon comes with a custom radio button design which works across browsers.

<!-- First radio button -->
<div class="custom-radio">
  <input type="radio" name="radio-set-1" id="radio-1" value="radio-1">
  <label for="radio-1">Radio 1</label>

<!-- Second radio button (checked by default) -->
<div class="custom-radio">
  <input type="radio" name="radio-set-1" id="radio-2" checked="checked" value="radio-2">
  <label for="radio-2">Radio 2</label>

The following things should be kept in mind when using radio buttons in Halfmoon:

  • The <label> element is a requirement, as without it, the custom radio button will not be rendered.
  • The <input> element must have the type="radio" attribute.
  • The <label> element must come after the <input> element in the container with the .custom-radio class.
  • The id="..." attribute of the input and the for="..." attribute of the label should have the same value.
  • Radio buttons are grouped into one set when the <input> elements have the same value for the name="..." attribute.
  • Containers with the class .custom-radio have no margins (margin: 0) by default. The vertically stacked ones on this page are styled to have a margin on the bottom using a utility class. This is not shown in the code for the sake of conciseness. We recommend using a wrapper with the .form-group class inside forms. This will add a margin between the elements. See the example here (opens in new tab).

Horizontal stacking #

By default, the containers with the class .custom-radio have the display: block property. However, they can be stacked horizontally by adding the .d-inline-block utility class to them.

<!-- Horizontally stacked radio buttons -->
<div class="custom-radio d-inline-block mr-10"> <!-- d-inline-block = display: inline-block, mr-10 = margin-right: 1rem (10px) -->
  <input type="radio" name="radio-set-2" id="radio-3" value="radio-3">
  <label for="radio-3">Radio 3</label>
<div class="custom-radio d-inline-block">
  <input type="radio" name="radio-set-2" id="radio-4" value="radio-4">
  <label for="radio-4">Radio 4</label>

Disabled radio buttons #

Radio buttons can be disabled by adding the disabled="..." attribute to them.

<!-- Disabled radio buttons -->
<div class="custom-radio">
  <input type="radio" name="radio-set-3" id="radio-5" disabled="disabled" value="radio-5">
  <label for="radio-5">Radio 5 (disabled)</label>
<div class="custom-radio">
  <input type="radio" name="radio-set-3" id="radio-6" checked="checked" disabled="disabled" value="radio-6">
  <label for="radio-6">Radio 6 (disabled)</label>

Empty label #

As mentioned above, the <label> element is a requirement. When creating radio buttons with empty labels, the contents of the label should be kept empty, but the element should still be there. Also, the class .blank should be added to the label. This will remove the extra margin. The next example shows a radio button with an empty label inside an input group.

<!-- Input group with radio button -->
<div class="input-group">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <!-- Radio button with empty label -->
      <div class="custom-radio">
        <input type="radio" name="radio-set-4" id="radio-7" value="">
        <label for="radio-7" class="blank"></label>
  <input type="text" class="form-control" placeholder="Input group with radio button">

Up next: Switch