Move radio type input to the right of label

Labani Das 0
Viewed 40

I have to build a form that has radio-type input to the right of the text (text-label) without changing the order of input-tag and label tag.

As the id's for input and label are being set dynamically and maybe due to this reason changing the order is not working instead the radio button is getting vanished. But I am not finding a way to do it.

Below is the code I wrote and the image of the desired outcome.

My code outcome:

image of code output

Code below (it's a ruby on rails syntax):

<div class="options">
  <input type="radio" id="<%=qid%>op1" name="<%=qid%>" value="<%= @questions[qid]["option1"] %>">
    <label class="option-value" for="<%=qid%>op1">A. <%= @questions[qid]["option1"] %></label>
  </div>

And the desired style I want to give

desired outcome

I also tried writing the input[type"radio"] after the label-tag but it's still not happening. I also tried applying float:right css to input[type="radio] but it's not working either.

radio-button forms ruby-on-rails css html
3 Answers

you need to place the label before input in HTML as

 <div class="options" style="user-select: auto;">
    <label class="option-value" for="Q2op2" style="user-select: auto;">B. Owners</label>
    <br style="user-select: auto;">
    <input type="radio" id="Q2op2" name="Q2" value="Owners" style="user-select: auto;">&nbsp;
  </div>

and add some CSS

.options{
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
useryjvq0

Always place the tags in the order that you want to view them. As you need text to appear first here, place the input tag first and then the radio button. As you need spacing between the two components, make the div container flex and space them evenly.

<div class="options" style="user-select: auto;" style="display: flex; justify-content: space-evenly;">
    <label class="option-value" for="Q2op2" style="user-select: auto;">B. Owners</label>      
    <input type="radio" id="Q2op2" name="Q2" value="Owners" style="user-select: auto;">&nbsp;
</div>
Himani Dadem0
  • Class options would be better as singular option, and option-* for the children elements of your atom.
  • You could use <label> as the wrapper an therefore no need to use for and id attributes
  • Don't use inline style
  • Use display flex on the label parent
  • Use margin-right: auto on the SPAN to distance it from the INPUT element

.option {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 0.3rem;
  font-size: 1.2rem;
  padding: 1rem;
}

.option-value {
  margin-right: auto;
}
<label class="option">
  <span class="option-value">B. Owners</span>
  <input class="option-input" type="radio" name="Q2" value="Owners">
</label>

Tip:
when in need to change the markup order visually, use CSS order (if in a grid or flex context)

.option {
  display: flex;
  border: 1px solid #ddd;
  border-radius: 0.3rem;
  font-size: 1.2rem;
  padding: 1rem;
}

.option-value {
  margin-right: auto;
  order: -1;
}
<label class="option">
  <input class="option-input" type="radio" name="Q2" value="Owners">
  <span class="option-value">B. Owners</span>
</label>

Roko C. Buljan0
Related