15Choice Listing

Pattern for radio/checkbox inputs. Allows the label text to wrap at the end of the line while remaning indented with the input.

  1. Overriding Foundation specificity

Show Markup 

<div class="choice-listing">
    <input name="choice" type="radio">
    <label class="choice-listing__label">
        No
    </label>
</div>
<div class="data-analytics-time_units mb2 mt1">
    <div class="js-category-list-section">
        <div class="category-list__header">
            <h4 class="category-list__heading js-expander__toggle cursor-pointer">
                <label>Label</label>
            </h4>
        </div>
        <ul class="category-list category-list--checkboxes category-list--collapsible">
            <li class="category-list__item">
                <div class="choice-listing">
                    <input hidden id="choice-1" name="units" type="radio">
                    <button tabindex="0" class="choice-listing__label js-button-for-radio" data-for="choice-1" aria-pressed="false">Months</button>
                </div>
            </li>
            <li class="category-list__item">
                <div class="choice-listing">
                    <input hidden id="" name="units" type="radio" checked>
                    <button tabindex="0" class="choice-listing__label js-button-for-radio" data-for="choice-2" aria-pressed="true" disabled="disabled">Years</button>
                </div>
            </li>
        </ul>
    </div>
</div>