/

Documentation

/

Form Controls

Form Controls

The Form components provide clean, user-friendly inputs and controls to capture information efficiently. Designed for accessibility and ease of use, they include text fields, checkboxes, radio buttons, and dropdowns — helping you build seamless, interactive forms that work smoothly across devices.

Input

Component

The Input component is a flexible form field that supports multiple types like text, email, and password. It features a clean design with a border that highlights in the primary color on hover — enhancing usability and providing clear visual feedback during interaction.

Example

Input types can be configured throught the right panel.

The default button is setup to have hover and pressed states by default. It also has variants that you can use to display different styles.

Select

Component

The Select component offers a customizable dropdown menu for choosing options easily. Designed with clarity and smooth interaction in mind, it highlights the border on hover with the primary color, ensuring users have a seamless and accessible selection experience.

Example

The select component is straightforward to setup.

The default button is setup to have hover and pressed states by default. It also has variants that you can use to display different styles.

Textarea

Component

The Textarea component is a flexible, multi-line input field designed like the Input component. It supports user-friendly text entry with a clean design and highlights the border in the primary color on hover—providing consistent visual feedback across your forms.

Example

Textareas can be resized on the fly.

The default button is setup to have hover and pressed states by default. It also has variants that you can use to display different styles.

Checkbox

Component

The Checkbox component offers a simple, accessible way to toggle options on or off. It features a clean design with a clear checkmark and highlights the border in the primary color on hover—ensuring intuitive interaction and consistent visual feedback.

Example

The checkbox label is also clickable.

The default button is setup to have hover and pressed states by default. It also has variants that you can use to display different styles.

Radio

Component

The Radio component allows users to select one option from a group with clear, accessible controls. It features a clean design that highlights the outer circle border in the primary color on hover, providing intuitive feedback and seamless interaction across devices.

Example

Radio buttons can be grouped.

The default button is setup to have hover and pressed states by default. It also has variants that you can use to display different styles.

Radio

Summary

The Form collection includes versatile, accessible inputs like text fields, selects, textareas, checkboxes, and radio buttons. Each component features clean designs with primary-color hover highlights, ensuring intuitive interaction and a consistent, user-friendly form experience across devices.

Create a free website with Framer, the website builder loved by startups, designers and agencies.