1. Home
  2. Components

Components menu

Radio buttons

Are you contact us about:

Select an option

Are you signing up as an:

Select an option

HTML

                                
                                    

                                        <form>
                                            <fieldset>
                                                <legend> Are you contact us about: </legend>
                                                <p class="form-hint--text"> Select an option </p>
                                                <div class="form-field--group">
                                                    <div class="form-radio">
                                                        <input class="form-radio--input form-check-input" id="select-flooding" name="contact-type" type="radio" value="flooding" checked>
                                                        <label class="form-radio--label" for="select-flooding"> Flooding </label>
                                                    </div>
                                                    <div class="form-radio">
                                                        <input class="form-radio--input form-check-input" id="select-pollution" name="contact-type" type="radio" value="pollution">
                                                        <label class="form-radio--label" for="select-pollution"> Pollution </label>
                                                    </div>
                                                </div> <!-- // field--group -->
                                            </fieldset>
                                        </form>

                                        <form>
                                            <fieldset>
                                                <legend> Are you signing up as an: </legend>
                                                <p class="form-hint--text"> Select an option </p>
                                                <div class="form-field--group">
                                                    <div class="form-radio">
                                                        <input class="form-radio--input-floodline form-check-input" id="floodline-individual" name="signup-type" type="radio" value="individual" checked>
                                                        <label class="form-radio--label" for="select-individual"> Individual </label>
                                                    </div>
                                                    <div class="form-radio">
                                                        <input class="form-radio--input-floodline form-check-input" id="floodline-organisation" name="signup-type" type="radio" value="organisation">
                                                        <label class="form-radio--label" for="select-organisation"> Organisation </label>
                                                    </div>
                                                </div> <!-- // field--group -->
                                            </fieldset>
                                        </form>

CSS

                                
                                    

                                        /* Radio buttons
                                        ------------------------------------ */
                                        .form-radio {
                                            margin-bottom: 24px;
                                            position: relative;
                                        }
                                        .form-radio--input, .form-radio--input-floodline {
                                            height: 44px;
                                            position: absolute;
                                            width: 44px;
                                        }
                                        .form-radio--input:checked, .form-radio--input-floodline:checked {
                                            background-color: var(--scottish-dark-teal);
                                            border-color: var(--grey-one);
                                        }
                                        .form-radio--input:focus{
                                            border-color: #000000;
                                            outline: 4px solid var(--verdant-green);
                                            outline-offset: 0;
                                        }
                                        .form-radio--input-floodline:focus{
                                            border-color: #000000;
                                            outline: 4px solid var(--yellow);
                                            outline-offset: 0;
                                        }
                                        .form-radio--label {
                                            display: inline-block;
                                            padding: 13px 20px 0px 60px;
                                        }