Inputs

Input settings in Slab let merchants control how form fields look and feel across the storefront. Use Theme settings > Inputs to set default, hover, and focus styles so text fields stay consistent and easy to use.

How to set up inputs

Use this order to make input styling changes predictable:

1. Open Theme settings > Inputs.

2. In Default colors, set input Background and Border for the resting state.

3. In Hover colors, set Background and Border for pointer hover.

4. In Focus colors, set Background and Border for active fields.

5. In Spacing, choose whether to keep Enable horizontal padding turned on.

6. In Style, choose Border position as Full or Bottom.

7. Optional: open Theme settings > Borders to adjust input border width and input radius.

Suggested setup defaults for most stores

• Start with Body for input backgrounds, then move to Shade 1 if fields need more contrast.

• Keep resting borders on Standard or Subtle so forms do not overpower page content.

• Use Primary or Strong for focus borders so customers can clearly see the active field.

• Keep Enable horizontal padding on for better readability in text inputs.

• Use Full border position unless your brand style prefers an underline-only input.

What each inputs setting controls

Default colors

These settings control how inputs look before hover or focus.

Setting	What it controls	Options	Default
Background	Input background color in the default state.	Body, Shade 1, Shade 2, Shade 3, Transparent	Body
Border	Input border color in the default state.	Standard, Subtle, Strong, Primary, Secondary, Tertiary, None	None

Hover colors

These settings control how inputs look when a customer hovers a field.

Setting	What it controls	Options	Default
Background	Input background color on hover.	Body, Shade 1, Shade 2, Shade 3, Transparent	Body
Border	Input border color on hover.	Standard, Subtle, Strong, Primary, Secondary, Tertiary, None	None

Focus colors

These settings control how inputs look when a field is active.

Setting	What it controls	Options	Default
Background	Input background color on focus.	Body, Shade 1, Shade 2, Shade 3, Transparent	Body
Border	Input border color on focus.	Standard, Subtle, Strong, Primary, Secondary, Tertiary	Primary

Spacing

Setting	What it controls	Default
Enable horizontal padding	Adds left and right internal spacing inside input fields.	Enabled

Style

Setting	What it controls	Options	Default
Border position	Shows borders on all sides or only on the bottom edge of inputs.	Full, Bottom	Full