Forms

Claustrophobic people are more productive thinking out of the box.

Checkbox

Two variations of Webflow's native checkbox component:

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

Checkbox

Uses a hidden checkbox behind the initial box to apply light/dark styles appropriately. Note: Webflow interactions don't work with checkboxes.

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

Switch

A switch using standard checkbox styles from Webflow, with a couple of additions to ensure colours are applied correctly for light/dark mode.

Date picker

Visually identical to text inputs, although under the hood they work very differently! To have date pickers on a page, you must paste the custom code attached to the body of this page (at the bottom of Webflow's settings for this page).

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

Date picker

Uses a mix of native date pickers for mobile devices/tablets, and a custom date picker library for everything else!

Sliders

You'll need to tweak the settings for these in custom code (each slider has an embed which contains settings at the top).

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

Freeform slider

A slider field with an assigned start value and range. You can extract these values to use in calculators, input previews, etc.

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

Stepped slider

Identical to the freeform slider, with an additional "step" attribute in the setup HTML.

Radio selection

Radio buttons are a selection control that often appears when users are asked to make decisions or select a choice from options.

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

Radio selection

Webflow's radio buttons are a little weird to set up: give each button the same group name in settings, and Webflow will automatically apply single-choice grouping to them. For multi-selection, use switches, checkboxes in a list, or chips

Text inputs

Tweaking some of these labels requires briefly swapping the z-index of the class. Remember to put it back when you change it, otherwise the material focus effects won't work.

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

Text input

A standard material text input. As with all other fields on this page, it will fill all available space provided by the form wrapper.

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

Number input

Identical to the text input, with an added example custom attribute to summon a number keyboard when on mobile.

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

Text area

Identical classes to the others, but with an extended length for long-form text input.

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

Selection input

Used to choose from different text options. Note: multi-select doesn't work on these, nor does it usually work on the native version. Use chips instead.