Form

Learn about Form elements and how to use them in the Base System

Form Overview

Form utility elements start with the prefix "Form"

Class Name	Property
Form Block	Webflow Form Block Element
Form	Default <form> style
Form Field Label	Default <label> style
Form Input Field	Default <input> style
Form Input Field + Text Area	Variant of <input> for <textarea>
Form Input Field + Select	Variant of <input> for <select>
Form Checkbox	Default <input type="checkbox">
Form Radio	Default <input type="radio">
Form Success Message
Form Error Message

• Select has appearance:none set to hide the default arrow.

• Checkbox has user-event: none to prevent label text from being selected when clicking checkbox

Adding icons to input fields

1

Add div block

Wrap input field inside Form Icon Wrapper, which has position: relative

2

Add icon inside div wrapper

Inside the div wrapper add an icon with absolute position right or left

3

Add padding to input field

icon right combo class to input to add padding right/left