Radio Buttons

Multiple different styles of radio buttons (tag radio, image radio, content radio etc.) with customizable "checked" class for your Webflow forms.
1. Copy & Paste Elements
2. Instructions
3. Accessibility
4. FAQ

Copy & Paste Elements

Tag Radio Buttons

Copy
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Image Radio Buttons

Copy
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Content Radio Buttons

Copy
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Instructions

a. Copy & paste the Inputflow Library script
IMPORTANT: You only have to paste this once. If you have pasted this to your page before (because you used another element of the Inputflow Library) you do not need to add it again.
<script type="module" src="https://cdn.jsdelivr.net/gh/inputflow-tools/library@1/i.js"></script>
Copy Script
b. Add/modify the required attributes
MPORTANT: If you copied one of the elements above, the necessary attributes are already added. You can simply modify or change them as needed.

IMPORTANT: If you are uncertain about the structure of the elements, we recommend copying one of the elements from above and using it as a reference/starting point.
Radio button
I want this element to be the radio button element
No additional attribute required

The Inputflow library automatically detects Webflow radio buttons.

Checked combo class
I want this combo class to be added to checked inputs
Attribute name
=
Attribute value

This attribute is optional

Add the if-lib-checked-class="your-class-name" attribute to a container element on your page, typically a form or the body element. This will enable the following behavior:

  1. All radio buttons and checkboxes inside this container will receive the checked class when selected.
  2. Elements associated with the checked radio button or checkbox (such as labels, field wrappers, and icons) will also receive this checked class.

Important notes:

  • The default "checked" class is "is-checked".
  • This behavior is activated as soon as you include the Inputflow Library script on your page.
  • By default the script will apply this behavior to all radio buttons and checkboxes on the entire page (so if you want to use the default "is-checked" combo class, you don't have to add this attribute)

Accessibility

Keyboard Support

The following keyboard controls are availble for this component:
Key
Function
tab
Moves focus to the (next) input element
shift + tab
Moves focus to the (previous) input element
space
Select focused radio button
right arrow
down arrow
Moves the focus and selection to the next radio button
left arrow
up arrow
Moves the focus and selection to the previous radio button

Frequent Questions

Is Inputflow free to use?

Inputflow has an unlimited free trial version, which you can use on your .webflow.io domains completely for free.

The idea is, that you can test out Inputflow with all its features, as long as you want, to see if it is a good fit for your project requirements.

Only once you want to use Inputflow on a custom domain, we ask you to upgrade to a paid plan.

I want to build XYZ. Can Inputflow do this?

If you are not sure, whether Inputflow covers your use-case or not, send your project details to hey@inputflow.io and we'll respond with a Loom video within 24 hours.

Where can I learn more about how Inputflow works?

We recommend that you check out the documentation, the 2-minute quick-start guide, and the video tutorial.

Can I really get my money back for any reason?

Yes. Any reason. We won't even ask why. Everyone on our team has done freelance or agency work in the past, so we get it. Whatever your reason, contact us within 30 days after your purchase and we'll give you a full refund, no questions asked.

Can I use Inputflow on client sites?

Yes, you can use it on your client projects or your own projects.

I have a problem and I need help!

Send an email to support@inputflow.io. Include the following: a read-only link and the link to the live website where the form is displayed. We take support very seriously and will make sure to resolve your issue quickly.

What if I exceed my submission limit? Will my form stop working?

Your forms will continue to work. We are definitely not shutting down your forms just because you get a lot of unexpected submissions. We will send you a friendly email, that it is time to upgrade to a higher plan.

Does Inputflow work with Wordpress?

No. Inputflow only works with Webflow.

How are submissions counted?

Whenever a form that you built with Inputflow is submitted, it counts as one submission. Submissions are counted at the account level. For example, if you have four different websites that each receive 200 submissions per month through Inputflow forms connected with your account, this counts as 800 submissions (4 * 200).

Does Inputflow bypass the Webflow submission limit?

Not by default. Every Inputflow form is a Webflow form. This means that when an Inputflow form is submitted, a standard Webflow form submission occurs in the background. This would count as one Inputflow submission and one Webflow submission.

However, with Inputflow, you have the option to submit your forms to custom webhooks (e.g., Zapier, Make, etc.). In that case, no native Webflow submission occurs, and it counts as only one Inputflow submission.

Is Inputflow free to use?

Inputflow has an unlimited free trial version, which you can use on your .webflow.io domains completely for free.

The idea is, that you can test out Inputflow with all its features, as long as you want, to see if it is a good fit for your project requirements.

Only once you want to use Inputflow on a custom domain, we ask you to upgrade to a paid plan.

I want to build XYZ. Can Inputflow do this?

If you are not sure, whether Inputflow covers your use-case or not, send your project details to hey@inputflow.io and we'll respond with a Loom video within 24 hours.

Where can I learn more about how Inputflow works?

We recommend that you check out the documentation, the 2-minute quick-start guide, and the video tutorial.

Can I really get my money back for any reason?

Yes. Any reason. We won't even ask why. Everyone on our team has done freelance or agency work in the past, so we get it. Whatever your reason, contact us within 30 days after your purchase and we'll give you a full refund, no questions asked.

Can I use Inputflow on client sites?

Yes, you can use it on your client projects or your own projects.

I have a problem and I need help!

Send an email to support@inputflow.io. Include the following: a read-only link and the link to the live website where the form is displayed. We take support very seriously and will make sure to resolve your issue quickly.

What if I exceed my submission limit? Will my form stop working?

Your forms will continue to work. We are definitely not shutting down your forms just because you get a lot of unexpected submissions. We will send you a friendly email, that it is time to upgrade to a higher plan.

Does Inputflow work with Wordpress?

No. Inputflow only works with Webflow.

How are submissions counted?

Whenever a form that you built with Inputflow is submitted, it counts as one submission. Submissions are counted at the account level. For example, if you have four different websites that each receive 200 submissions per month through Inputflow forms connected with your account, this counts as 800 submissions (4 * 200).

Does Inputflow bypass the Webflow submission limit?

Not by default. Every Inputflow form is a Webflow form. This means that when an Inputflow form is submitted, a standard Webflow form submission occurs in the background. This would count as one Inputflow submission and one Webflow submission.

However, with Inputflow, you have the option to submit your forms to custom webhooks (e.g., Zapier, Make, etc.). In that case, no native Webflow submission occurs, and it counts as only one Inputflow submission.

Start building your own multi-step form!

By clicking the button down below, you can start the form editor, and create a beautiful muli-step form in Webflow!
Install Webflow App