Styling Guide

Design every input, label, error, and success state directly in the Properties Panel. Match your project's look without writing a single line of CSS.

How styling works

Every Form Kit field exposes style sections in the Properties Panel. Each section is a collapsible group of controls — colors, fonts, spacing, borders, and shadows. Just like styling any other Framer layer.

Section	What it controls
Input Styles	Background, text color, placeholder color, border, border-radius, padding, font size, height
Label Styles	Color, font size, font weight, margin-bottom, letter-spacing
Error Styles	Text color, font size, border color (applied when an error is active)
Focus Styles	Background, border color, box-shadow (applied when the input is focused)
Success Styles	Border color, text color, icon color (applied when validation passes)

Copy and paste styles

Style one field perfectly, then replicate it across your entire form in seconds:

Select a styled Form Kit field
Press Ctrl + Alt + C to copy its property overrides
Select another Form Kit field (same type or different)
Press Ctrl + Alt + V to paste

This copies all property overrides — input styles, label styles, error styles, validation rules, and more. Works across different field types as long as the property names match.

Input styles

Common input style properties:

Property	Default	Notes
backgroundColor	`#FFFFFF`	Input background color
textColor	`#333333`	Input text when field has a value
placeholderColor	`#999999`	Placeholder text and text color when empty
borderColor	`#E0E0E0`	Border in default state
borderWidth	`1`	In pixels
borderRadius	`8`	In pixels
padding	`12`	Inner padding in pixels
fontSize	`14`	In pixels
height	`44`	Input height in pixels

Conditional text color

All text inputs use smart color switching:

When the field is empty, text color uses placeholderColor
When the field has a value, text color switches to textColor
The ::placeholder pseudo-element also uses placeholderColor

This pattern is used by: Text, Email, Phone, URL, Textarea, Password, Number, and Select.

Browser autofill override

Browsers apply their own autofill styles (light blue backgrounds, forced text colors) that can break your design. Form Kit overrides these automatically:

-webkit-text-fill-color overrides the browser's forced text color
box-shadow: inset covers the browser's autofill background
transition: background-color 5000s delays the browser's background change indefinitely

No configuration needed — autofill override is applied automatically based on your inputStyles colors.

Select dropdown styling

The Select component is fully custom (not a native <select>) with additional controls:

Arrow color and size — customize the dropdown chevron
Dropdown background — separate from the trigger input
Option hover color — highlight color on mouse-over
Group header styles — font weight and color for option groups
Max dropdown height — scroll threshold for long option lists

Selection component styling

Checkbox, Radio, Toggle, and Button Group have unique styling options:

Checkbox / Radio

Separate checked/unchecked container styles
Custom icon types (check, circle, x, hidden, custom SVG)
Icon color and size
Container background, border, padding

Toggle / Button Group

Track and thumb colors (on/off states)
Active/inactive button background and text
Gap and layout direction

Related guides

Validation

Configure error and success states that your styles control.

All Components

Browse all 35+ components and their individual properties.