githubEdit

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

Last updated

Was this helpful?