Streaming live at 10am (PST)

How to Inline Radio Button like

I must style multipic Radial selector so box selects radial button.

Screenshot A: We must make div box select radial button

Screenshot B: Apple has a similar function with Radio selector with inline styling


Designer Shared:

Has anyone have success with building textbox type selectors for radio?

The easiest method to make a <label> clickable is to give an ID #checkbox to the checkbox, and to add a custom attribute for="checkbox" to the <label>.

But foris reserved by Webflow:


So another method to achieve that: the <label> should include the <input>. It’s actually a very good HTML practice for accessibility.

So instead of:

<label for="cheese">Do you like cheese?</label>
<input type="checkbox" name="cheese" id="cheese">


<label>Do you like peas?
  <input type="checkbox" name="peas">

In Webflow the code for a checkbox doesn’t support that yet (and you can’t modify it)


But you can use a custom code box inside of the form block


Now the size of your <label> is your click/touch area.

Just avoid 2 things in order not to break accessibility:

  • don’t put a link inside the label
  • don’t put anything else than text and the input inside the label

edit: did the demo with a checkbox, apply to radio of course.

1 Like

I made a quick demo of radio and checkbox hack/styling in Webflow.

There’s a link in the page to open the site in Webflow.

1 Like

Well… here is chrome and here is firefox

I don’t suppose that’s how it should look?

Awesome thanks @vincent!

1 Like