How do you make the radio button text to be clickable too?

If you use the label tag, giving your radio button an ID, you should be able to click on the label to select the radio.

<input type="radio" name="group1" value="Milk" id="rad1">
<label for="rad1">Milk</label>

http://jsfiddle.net/tvFgU/1/

This is valid for xhtml 1.0 strict:

For React JSX

<input type="radio" name="group" value="happy" id="rad1">
<label htmlFor="rad1">YES</label>

<input type="radio" name="group" value="sad" id="rad2">
<label htmlFor="rad2">NO</label>

Here Name attribute would be the same for both radio button.

Here you want to use the label tag.

Something like:

            <label>
                <input type="radio" name="group1" value="Milk">
                Milk
            </label><br/>

Labels tell the browser that everything contained within should be treated as one element (in terms of text. They are not divs)

Take a look at this for an example: http://www.w3schools.com/tags/tryit.asp?filename=tryhtml_label