JB Framework

Radio Buttons

• Regular radio button
• Checked radio button
• Checkbox with a long label. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis tortor nec ante tincidunt, sit amet accumsan dolor feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.
• Disabled radio button
• Checked disabled radio button
• Invalid radio button
• Checked invalid radio button

<ul class="input-list">
    <li class="input-list__item">
        <label class="input-list__label">
            <input name="a" type="radio"> Regular radio button
        </label>
    </li>
    <li class="input-list__item">
        <label class="input-list__label">
            <input name="a" type="radio" checked> Checked radio button
        </label>
    </li>
    <li class="input-list__item">
        <label class="input-list__label">
            <input name="a" type="radio"> Checkbox with a long label. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam iaculis tortor nec ante tincidunt, sit amet accumsan dolor feugiat. Interdum et malesuada fames ac ante ipsum primis in faucibus.
        </label>
    </li>
    <li class="input-list__item">
        <label class="input-list__label">
            <input name="b" type="radio" disabled> Disabled radio button
        </label>
    </li>
    <li class="input-list__item">
        <label class="input-list__label">
            <input name="b" type="radio" checked disabled> Checked disabled radio button
        </label>
    </li>
    <li class="input-list__item">
        <label class="input-list__label">
            <input class="invalid" name="c" type="radio"> Invalid radio button
        </label>
    </li>
    <li class="input-list__item">
        <label class="input-list__label">
            <input class="invalid" name="c" type="radio" checked> Checked invalid radio button
        </label>
    </li>
</ul>

Inline radio button list

• John
• Paul
• George
• Ringo

<ul class="list--inline">
    <li>
        <label class="input-list__label">
            <input name="d" type="radio"> John
        </label>
    </li>
    <li>
        <label class="input-list__label">
            <input name="d" type="radio"> Paul
        </label>
    </li>
    <li>
        <label class="input-list__label">
            <input name="d" type="radio"> George
        </label>
    </li>
    <li>
        <label class="input-list__label">
            <input name="d" type="radio"> Ringo
        </label>
    </li>
</ul>