Radio Input

Radio inputs allow users to select one item at a time.

Radio group

draft

Radio groups provide a list of available items to choose from from which only one option can be selected.

You can Use attribute checked to default one option to a checked state.

<div class="ds-block">

    <form class="ds-form">

        <fieldset class="ds-control-group">
            <legend class="ds-legend ">
                Are you hungry?
            </legend>

            <div class="ds-form-group">
                <input class="ds-input-radio" type="radio" name="brew" id="uniqueID-1" checked>
                <label class="ds-label" for="uniqueID-1">Yes</label>
            </div>

            <div class="ds-form-group">
                <input class="ds-input-radio" type="radio" name="brew" id="uniqueID-2">
                <label class="ds-label" for="uniqueID-2">No</label>
            </div>

        </fieldset>

    </form>

</div>

Radio group

draft

Add <abbr class="ds-label__required" title="required">*</abbr> tag after legend text

<div class="ds-block">

    <form class="ds-form">

        <fieldset class="ds-control-group">
            <legend class="ds-legend ">
                Are you hungry?  <abbr class="ds-label__required" title="required">*</abbr>
            </legend>

            <div class="ds-form-group">
                <input class="ds-input-radio" type="radio" name="brew" id="uniqueID-1" checked>
                <label class="ds-label" for="uniqueID-1">Yes</label>
            </div>

            <div class="ds-form-group">
                <input class="ds-input-radio" type="radio" name="brew" id="uniqueID-2">
                <label class="ds-label" for="uniqueID-2">No</label>
            </div>

        </fieldset>

    </form>

</div>

Hint Text

draft 
<div class="ds-block">

    <form class="ds-form">

        <fieldset class="ds-control-group">
            <legend class="ds-legend ">
                Are you hungry?
            </legend>

            <div class="ds-form-group">
                <input class="ds-input-radio" type="radio" name="brew" id="uniqueID-1" checked>
                <label class="ds-label" for="uniqueID-1">Yes</label>
            </div>

            <div class="ds-form-group">
                <input class="ds-input-radio" type="radio" name="brew" id="uniqueID-2">
                <label class="ds-label" for="uniqueID-2">No</label>
            </div>

        </fieldset>

        <small class="ds-hint" id="text-hint">Your hunger is important to us.</small>

    </form>

</div>

Disabled

draft 
<div class="ds-block">

    <form class="ds-form">

        <fieldset class="ds-control-group">
            <legend class="ds-legend ">
                Are you hungry?
            </legend>

            <div class="ds-form-group">
                <input class="ds-input-radio" type="radio" name="brew" id="uniqueID-1" disabled>
                <label class="ds-label" for="uniqueID-1">Yes</label>
            </div>

            <div class="ds-form-group">
                <input class="ds-input-radio" type="radio" name="brew" id="uniqueID-2" disabled>
                <label class="ds-label" for="uniqueID-2">No</label>
            </div>

        </fieldset>

    </form>

</div>

Invalid

draft 
<div class="ds-block">

    <form class="ds-form">

        <fieldset class="ds-control-group">
            <legend class="ds-legend ">
                Are you hungry?
            </legend>

            <div class="ds-form-group">
                <input class="ds-input-radio" type="radio" name="brew" id="uniqueID-1" checked>
                <label class="ds-label" for="uniqueID-1">Yes</label>
            </div>

            <div class="ds-form-group">
                <input class="ds-input-radio" type="radio" name="brew" id="uniqueID-2">
                <label class="ds-label" for="uniqueID-2">No</label>
            </div>

        </fieldset>

        <small class="ds-hint" id="text-hint">Your hunger is important to us.</small>
        <small class="ds-hint ds-hint--invalid">Invalid message</small>

    </form>

</div>

Invalid

draft 
<div class="ds-block">

    <form class="ds-form">

        <fieldset class="ds-control-group">
            <legend class="ds-legend ">
                Are you hungry?
            </legend>

            <div class="ds-form-group">
                <input class="ds-input-radio" type="radio" name="brew" id="uniqueID-1" checked>
                <label class="ds-label" for="uniqueID-1">Yes</label>
            </div>

            <div class="ds-form-group">
                <input class="ds-input-radio" type="radio" name="brew" id="uniqueID-2">
                <label class="ds-label" for="uniqueID-2">No</label>
            </div>

        </fieldset>

        <small class="ds-hint" id="text-hint">Your hunger is important to us.</small>
        <small class="ds-hint ds-hint--valid">Succesfully message</small>

    </form>

</div>

Radio group

draft

Add ds-control-group--inline modifier class to ds-control-group fieldset for inline radio boxes.

<div class="ds-block">

    <form class="ds-form">

        <fieldset class="ds-control-group ds-control-group--inline">
            <legend class="ds-legend">
                Are you hungry:
            </legend>

            <div class="ds-form-group">
                <input class="ds-input-radio" type="radio" name="brew" id="uniqueID-1" checked>
                <label class="ds-label" for="uniqueID-1">Yes</label>
            </div>

            <div class="ds-form-group">
                <input class="ds-input-radio" type="radio" name="brew" id="uniqueID-2">
                <label class="ds-label" for="uniqueID-2">No</label>
            </div>

        </fieldset>

    </form>

</div>