Form
Learn about form elements, and how to best use them in the Base System
1.0 Form Elements
Form elements are fundamental UI components that allow users to input data, make selections, and interact with your application. They are used in a variety of contexts, from simple contact forms to complex data entry interfaces. In the Base System, form elements are designed for accessibility, consistency, and ease of customization, ensuring they can be tailored to meet your specific needs.
Explore the default form element classes and properties below, or learn more about how form elements are used in your layouts through the interaction overview page.
2.0 Form Classes
Form elements come with predefined styles that ensure consistency and usability across your project. The table below outlines the default form element classes and their associated properties. You can modify these classes or create custom ones to match your design system.
| Type | Class Name | Width |
|---|---|---|
Text Block | Form Field Label | 100% |
Input Field | Form Text Field | 1140px |
Text Area | Form Text Area | 1280px |
Checkbox | Form Checkbox | |
Radio Button | Form Radio | |
Select | Form Select |
3.0 General Usage
3.1 Element Type
Generally, we recommend using an embed block and SVG based icons. Using SVG icons provides a number of benefits that most designers will be familiar with, additionally it provides the following development benefits:
Interactable in the designer: By using an SVG embed icon, users can quickly change colors of icons and add hover effects by using fill="currentColor", .
Doesn't add asset into users project: This
Faster Solution: Save time exporting and uploading images as it is easier to copy the svg code
However, If an icon has a shadow which is not handled well by SVG then we will use an image.
3.2 Class Naming
Class naming for sections follows a similiar approach to other structure elements. You can learn more about the general philosophy of class naming here.
Default Sections: Default sections use descriptive names based on the amount of padding
Example:
Section Large,Section Small,Section X Small
Custom Sections: Use section as a suffix to the parent category, can use any styles
Example:
Testmonial Section,Pricing Section
Adding icons to form
When we want to add icons inside text inputs, selects etc
add a relative wrapper
add icon with absolute position right or left
Add icon right combo class to input to add padding right/left
Classes
Form Relative Wrapper
Form Input Icon Right
Form Input Icon Left
Forms
Id's and names should be correct
Field Types should be set
Terms & Conditions checkbox should be set to required
"Success" and "Error Message" need to be set
Class “Form Block” should have no styles except margin bottom removed
Using the select element - set appearance to none otherwise will not look good in safari
Last updated
