Cardiff Council Content and design system

www.cardiff.gov.uk

Forms

selecting

Select fieldRadio buttonsCheckbox

layout

Message boxNavigation buttonsValidation and Errors

input

TextEmailTelephoneTextAreaSearch boxDateTimeRangeFileNumber

Radio buttons

Used when only one option can be selected out of a couple of choices.

How to use this component

This element should be used when asking a user to make a selection, where only 1 option is allowed.  If the options are more than 5 or 6, consider using the Select Field instead.


Code Resource

<label for="radContactUs" id="contactus" class="form_formLabelTitleLong">If we need to contact you, how would you prefer we do it? *</label>

<fieldset class="form_radio_holder">
                    <input id="radContactUs_0" type="radio" name="radContactUs" value="Email">
                    <label for="radContactUs_0">Email</label>   
                    <input id="radContactUs_1" type="radio" name="radContactUs" value="Phone">
                    <label for="radContactUs_1">Phone</label>   
                    <input id="radContactUs_2" type="radio" name="radContactUs" value="Post" checked="checked">
                    <label for="radContactUs_2">Post</label>
</fieldset>
/* radio buttons */


.form_radio_holder {
	position: relative;
	margin-bottom: 15px;
	border: 0px;
	padding: 0px;
}


.form_formLabelTitleLong {
    width: 98%;
    font-size: 18px;
    color: black;
    margin-bottom: 5px;
    float: left;
    text-align: left;
}

.form_formRadioButtons {
    width: 100%;
    display: block;
    margin-top: 0px;
    padding-bottom: 0px;
    margin-bottom: 40px;
    float: left;
    color: #000;
    border: 0px solid silver;
}

.form_formRadioButtons td {
    padding: 0px;
}

input[type="radio"] {
    position: relative;
    left: -10000px;
}

input[type="radio"] + label {
    display: inline-block;
    margin: -2px 10px 0 0;
    vertical-align: middle;
    cursor: pointer;
    float: left;
    color: black;
    padding-top: 0px!important;
    font-size: 20px!important;
    text-align: left;
	width: 100%;
}

.form_formRadioButtons label {
    font-size: 12px;
    margin-top: 15px;
    padding: 0 10px 0 5px;
    width: 100%;
}

input[type="radio"] + label:before {
    background: url("https://www.cardiff.gov.uk/Style%20Library/IMAGES/radio_off.png");
    width: 35px;
    height: 35px;
    float: left;
    margin-right: 16px;
    content: "";
    background-size: contain;
    position: relative;
    top: -6px;
    color: #015b66 !important;
    -webkit-transition: all 0.3s ease-in-out;
    -moz-transition: all 0.3s ease-in-out;
    -o-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

input[type="radio"]:checked + label:before, input[type="radio"]:focus + label:before {
    	background: url("https://www.cardiff.gov.uk/Style%20Library/IMAGES/radio_on.png");
    	 background-size: contain;
}
/* END */

Working Example