PatternLab (0.1.259)

# Radio-Button

.c-radio

# Checked and Unchecked

Add the attribute checked

hide code 
<div class="c-radio">
    <input id="i2" type="radio" checked>
    <label for="i2">I'm checked</label>
</div>
<div class="c-radio">
    <input id="i1" type="radio">
    <label for="i1">I'm unchecked</label>
</div>

# Disabled Radio-Button

Add the attribute disabled="disabled"

hide code 
<div class="c-radio h-block">
    <input id="i4" type="radio" disabled="disabled" checked>
    <label for="i4">I'm a bit disabled but checked</label>
</div>
<div class="c-radio h-block">
    <input id="i5" type="radio" disabled="disabled">
    <label for="i5">I'm only disabled</label>
</div>

# Small Radio-Button

Add the modifier class -small"

hide code 
<div class="c-radio -small">
    <input id="i4" type="radio" checked>
    <label for="i4">I'm a small radio box </label>
</div>

# Horizontal Layout

Use the helper-class .h-inline-block

hide code 
<div class="c-radio h-inline-block">
    <input id="ci3" type="radio" name="radio-inline-group" checked>
    <label for="ci3">I'm in line</label>
</div>
<div class="c-radio h-inline-block">
    <input id="ci4" type="radio" name="radio-inline-group">
    <label for="ci4">I'm in line</label>
</div>
<div class="c-radio h-inline-block">
    <input id="ci7" type="radio" name="radio-inline-group">
    <label for="ci7">I'm in line</label>
</div>

# Centering an inline radio:

hide code 
<div class="h-type-align-center h-block">
    <div class="c-radio h-inline-block">
        <input id="ci10" type="radio">
        <label for="ci10">I'm totally centered</label>
    </div>
</div>

# Radio-Button Group with Label

.c-float-container.-radio

hide code 
<div class="c-float-container -has-radio">
    <label class="c-label">Label</label>
    <div class="c-radio h-inline-block">
        <input id="m1" type="radio" name="radio-group">
        <label for="m1">Option 1</label>
    </div>
    <div class="c-radio h-inline-block">
        <input id="m2" type="radio" name="radio-group">
        <label for="m2">Option 2</label>
    </div>
    <div class="c-radio h-inline-block">
        <input id="m4" type="radio" name="radio-group">
        <label for="m4">Option 3</label>
    </div>
</div>

← Radio Button (Fancy) →