Get boba!
boba Version 1.7.2

Radios

Radios let users switch between a predefined set of options.

Compatibility

Be sure that the input's type is radio, that each of the input's ids match their label's for, and that each of the inputs have the same name!

Note that for the label to be displayed correctly, it must be placed directly after the input tag.

<form class="form-control" action="#" method="post">
    <div class="radio">
        <input type="radio" id="example-radio-1" name="example-radio" class="radio-input" checked>
        <label for="example-radio-1" class="radio-label">
            Radio Option 1
        </label>
    </div>

    <div class="radio">
        <input type="radio" id="example-radio-2" name="example-radio" class="radio-input">
        <label for="example-radio-2" class="radio-label">
            Radio Option 2
        </label>
    </div>
    
    <div class="radio">
        <input type="radio" id="example-radio-3" name="example-radio" class="radio-input">
        <label for="example-radio-3" class="radio-label">
            Radio Option 3
        </label>
    </div>
</form>

Sizes

Radios can be resized.
<form class="form-control" action="#" method="post">
    <div class="radio small">
        <input type="radio" id="example-radio-sizes-small" name="example-radio-sizes" class="radio-input" checked>
        <label for="example-radio-sizes-small" class="radio-label">
            Small Radio Option
        </label>
    </div>
    
    <div class="radio">
        <input type="radio" id="example-radio-sizes-default" name="example-radio-sizes" class="radio-input">
        <label for="example-radio-sizes-default" class="radio-label">
            Default Radio Option
        </label>
    </div>
    
    <div class="radio medium">
        <input type="radio" id="example-radio-sizes-medium" name="example-radio-sizes" class="radio-input">
        <label for="example-radio-sizes-medium" class="radio-label">
            Medium Radio Option
        </label>
    </div>
    
    <div class="radio large">
        <input type="radio" id="example-radio-sizes-large" name="example-radio-sizes" class="radio-input">
        <label for="example-radio-sizes-large" class="radio-label">
            Large Radio Option
        </label>
    </div>
</form>

States

Radios can be disabled using the disabled attribute.
<form class="form-control" action="#" method="post">
    <div class="radio">
        <input type="radio" id="example-radio-selected-disabled" name="example-radio-disabled" class="radio-input" checked disabled>
        <label for="example-radio-selected-disabled" class="radio-label">
            Disabled Selected Radio
        </label>
    </div>

    <div class="radio">
        <input type="radio" id="example-radio-selected-disabled" name="example-radio-disabled" class="radio-input" disabled>
        <label for="example-radio-selected-disabled" class="radio-label">
            Disabled Unselected Radio
        </label>
    </div>
</form>

Colors

Change the color of your radios using boba's eye-catching color palette.
<form class="form-control" action="#" method="post">
    <div class="radio green">
        <input type="radio" id="example-radio-green" name="example-radio-green" class="radio-input" checked>
        <label for="example-radio-green" class="radio-label">
            Green Radio Option
        </label>
    </div>
</form>