Using "Label For" on Radio Buttons

Using the HTML 'label' tag with radio buttons

Does the label tag work with radio buttons?

Yes

If so, how do you use it?

Same way as for any other form control.

You either give it a for attribute that matches the id of the control, or you put the control inside the label element.

I'd like to use the label tag for each label in the left column

A label is for a control, not a set of controls.

If you want to caption a set of controls, use a <fieldset> with a <legend> (and give a <label> to each control in the set).

<fieldset>
  <legend> Salutation </legend>
  <label> <input type="radio" name="salutation" value="Mr."> Mr. </label>
  <label> <input type="radio" name="salutation" value="Mrs."> Mrs. </label>
  <!-- etc -->
</fieldset>

Using label for on radio buttons

You almost got it. It should be this:

<input type="radio" name="group1" id="r1" value="1" /><label for="r1"> button one</label>

adding labels to radio buttons

What you want is a legend in the fieldset, not a label. Labels are really only used to pair with inputs, hence the for/id suggestion in feitla's answer. Legends are the way to give an associated name to a fieldset. They're difficult to style though. You might be better off using the name attribute on the radio inputs to make them a group. Then you can just use a paragraph to put the question in instead. E.g.

<p>Q1: Do you like snozzberries?</p>
<input type=radio name=q1 id=q1-y /><label for=q1-y>Yes</label>
<input type=radio name=q1 id=q1-n /><label for=q1-n>No</label>

How to add radio button next to label in bootstrap 4

Here is demo using custom css

.custom-control-label::before,.custom-control-label::after {  left: 1.5rem!important;}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="form-group">  <label class="control-label"> 1) What is the answer of 3 + 5?</label>  <div class="ml-3">    <div class=" custom-radio custom-control">      <input type="radio" class="custom-control-input" id="q1_1" name="q1" value="1" formControlName="q1" />      <label class="custom-control-label" for="q1_1">2</label>    </div>    <div class=" custom-radio custom-control">      <input type="radio" class="custom-control-input" id="q1_2" name="q1" value="2" formControlName="q1" />      <label class="custom-control-label" for="q1_2">5</label>    </div>    <div class=" custom-radio custom-control">      <input type="radio" class="custom-control-input" id="q1_3" name="q1" value="3" formControlName="q1" />      <label class="custom-control-label" for="q1_3">7</label>    </div>    <div class=" custom-radio custom-control">      <input type="radio" class="custom-control-input" id="q1_4" name="q1" value="4" formControlName="q1" />      <label class="custom-control-label" for="q1_4">3</label>    </div>    <div class=" custom-radio custom-control">      <input type="radio" class="custom-control-input" id="q1_5" name="q1" value="5" formControlName="q1" />      <label class="custom-control-label" for="q1_5">8</label>    </div>  </div></div>

Label for radio button styling

You can check icheck jquery plugin for custom checkbox and radio buttons.

Check more at below link:-

http://git.io/arlzeA

But please remember you need to use inbuilt custom functions for check and uncheck.

$('.skin-flat input').iCheck({
    checkboxClass: 'icheckbox_flat-blue',
    radioClass: 'iradio_flat-blue'
});

Just wrap text inside .skin-flat and Radio/checkbox class.

You can check more on this on below link:-

https://stackoverflow.com/search?q=icheck

Enjoy this is too nice :)

If you are using bootstrap then use below link:-

https://bootsnipp.com/tags/checkbox

How to arrange a Three radio buttons on a same line along with label?

You have directly use the element selector by tag name instead by class or ID. So, other label element are also affected by that styling.

Please review your CSS code and give property to specific element by using class or ID or other selector instead of directly selecting by tag name.

I wrapped each radio buttons in a div and made those div a flexbox and gave them a gap to space out.

.radio-btns{
  display: flex;
  gap: 3rem;
}

<div class="radio-btns">
  
  <div>
    <input type="radio" id="Home" value="Home" name="Type" v-model="role">
  <label for="Home">Home</label>
  </div>
  
  <div>
  <input type="radio" id="Work" value="Work" name="Type" v-model="role">
  <label for="Work" class="work-label">Work</label>
  </div>
  
    <div>
  <input type="radio" id="Other" value="Other" name="Type" v-model="role">
  <label for="Other">Other</label>
  </div>
  
</div>

Get value of input radio buttons and separate label values as an object?

I think a solution would be to use forms.

If your logic becomes more complex, you should consider having a look at Reactive Forms.

But, in this case, Template Driven Forms can do the job:

<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
    <div *ngFor="let label of labels; index as idx">
    <label>{{ label }}</label>
    <ng-container [ngModelGroup]="label">
        <input ngModel [name]="'answer.' + idx" value="yes" type="radio">
        <input ngModel="yes" [name]="'answer.' + idx" value="no" type="radio">
    </ng-container>
    </div>

    <button type="submit">submit</button>
</form>

labels = ['label1', 'label2', 'label3'];

onSubmit (value) {
  console.log('value', value)
}

ng-run example

Semantic usage of the label in the form with radios

The semantic way to tackle this would be to group the radio buttons with a fieldset element.

<fieldset>
    <legend>Your favourite fruit?</legend>
    <label>
        <input type="radio" name="fruit" value="apple"/> Apple
    </label>
    <label>
        <input type="radio" name="fruit" value="banana"/> Banana
    </label>
    <label>
        <input type="radio" name="fruit" value="watermelon"/> Watermelon
    </label>
</fieldset>

This approach to your scenario is recommended by the W3C's Accessibility Tutorials: https://www.w3.org/WAI/tutorials/forms/grouping/ and MDN's Fieldset Article: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/fieldset

The default rendering of fieldsets can be improved with CSS. One example of that is here https://design-system.service.gov.uk/components/radios/

CSS: style radio button with label next to it?

If you're open to some HTML adjustments you might find this more flexible:

Make sure to include a focus state for the input to ensure it is accessible for keyboard users.

input[type="radio"] {  position: absolute;  opacity: 0;  cursor: pointer;}
label {  position: relative;  cursor: pointer;  padding-left: 30px;  display: inline-block;  line-height: 1.6;  margin-right: 15px;}
span {  position: absolute;  left: 0;  top: 0;  height: 20px;  width: 20px;  background: #FFF;  border: 2px solid black;  border-radius: 50%;}
span:after {  content: '';  position: absolute;  left: 5px;  top: 5px;  width: 10px;  height: 10px;  border-radius: 50%;  background: black;  display: none;}
input[type="radio"]:checked~span:after {  display: block;}
input[type="radio"]:focus~span {  outline: 2px solid orange;}

<label for="male">Male  <input type="radio" id="male" name="gender" value="M">   <span></span></label>

<label for="female">Female  <input type="radio" id="female" name="gender" value="F">   <span></span></label>

---

Related Topics