Open menu

CSS Input & Form Field Styler

Design text inputs that look good and work for everyone. Choose outlined, filled, underline, floating-label or pill styles in three sizes, set colors for the border, focus ring, errors and placeholder, and preview normal, error and disabled states side by side. The checks cover border contrast (WCAG 1.4.11), placeholder readability, focus visibility and target size. Export accessible HTML with labels and hint text, plus CSS, SCSS, Tailwind or React.

Preset gallery

We'll never share your email.

Enter a valid email address.

We'll never share your email.

Accessibility checks

  • Pass The field border has 4.8:1 contrast, so people can see where to type (WCAG 1.4.11).
  • Pass Placeholder text has 4.8:1 contrast.
  • Pass The focus color has 5.2:1 contrast with the page, so keyboard focus is clearly visible.
  • Pass Error text has 4.8:1 contrast, and errors also use an icon and a message, not color alone.
  • Pass The field is 44px tall: a comfortable touch target.
  • Pass Every field has a visible <label> connected with for/id, and hints are linked with aria-describedby.

Export code

<div class="field">
  <label class="field__label" for="email">Email address</label>
  <input class="field__input" id="email" type="email" autocomplete="email" placeholder="you@example.com" aria-describedby="email-hint">
  <p class="field__hint" id="email-hint">We'll never share your email.</p>
</div>

<!-- Error state: add the modifier class, aria-invalid and an error message -->
<div class="field field--error">
  <label class="field__label" for="email-error">Email address</label>
  <input class="field__input" id="email-error" type="email" autocomplete="email" placeholder="you@example.com" aria-invalid="true" value="not-an-email" aria-describedby="email-error-error">
  <p class="field__error" id="email-error-error"><span aria-hidden="true">⚠</span> Enter a valid email address.</p>
</div>
Favourites on this device (0)

No favourites yet.

Style & text
Size
Colors
Border color
Focus color
Error color
Field background
Text color
Placeholder color
Page background

How to use the form field styler

  1. Choose a style: outlined, filled, underline, floating label or pill.
  2. Pick a size (36, 44 or 52px tall), the corner radius and border width.
  3. Write the label and hint in your own words.
  4. Set the colors: border, focus, error, field background, text, placeholder and page background.
  5. Review the checks and the three preview states.
  6. Export the HTML, including the error-state markup, with CSS, SCSS, Tailwind or React.

The markup

<div class="field">
  <label class="field__label" for="email">Email address</label>
  <input class="field__input" id="email" type="email" autocomplete="email" aria-describedby="email-hint">
  <p class="field__hint" id="email-hint">We'll never share your email.</p>
</div>

For errors, add field--error, aria-invalid="true" and an error message whose id is in aria-describedby.

Worked examples

Example 1: a sign-up form

Load Outlined. The slate border passes 3:1 on white, the blue focus ring is clearly visible, and the hint sits under the field. Use autocomplete values such as email, name and new-password so browsers can fill them in.

Example 2: a compact settings panel

Load Outlined compact (36px). It’s fine for dense desktop admin screens, and the check notes that 44px is more comfortable on touch devices.

Example 3: a dark app

Load Dark. A lighter slate border on near-black, a sky-blue focus ring and a softened red for errors keep everything readable in dark mode.

Tips

  • Never remove the focus style. Replace the default outline with something at least as visible.
  • Keep placeholders as examples (“you@example.com”), not instructions.
  • Group related fields in a fieldset with a legend.
  • Show errors after the user leaves a field or submits the form, not on every keystroke.

Common mistakes

  • Placeholder as label. It vanishes on typing and usually fails contrast. Always use a real label.
  • Red-only errors. Add an icon and a clear message that says how to fix the problem.
  • Disabled fields without explanation. If a field is disabled, say why nearby, or keep it editable and validate the value instead.

Frequently asked questions

Why does every field have a visible label?

Placeholders disappear as soon as you type and are often too faint to read. A real <label> connected with for and id stays visible, is announced by screen readers and makes the label clickable. Floating labels keep the label visible by moving it above the text instead of hiding it.

How should errors be shown?

Mark the field with aria-invalid="true", show a clear text message next to it and link the message with aria-describedby. Don't rely on a red border alone: the export pairs color with an icon and text.

How much contrast does an input border need?

The border is what shows people where to click and type, so WCAG 1.4.11 asks for at least 3:1 against the background. Light grey borders on white often fail; the check tells you when.

How tall should inputs be?

WCAG 2.2 requires targets of at least 24 × 24 CSS pixels. 44px is a comfortable height for touch screens, which is why the medium size uses it.

Should I use placeholder text instead of a label?

No. Placeholders disappear when you type, often have low contrast, and aren't reliably read as labels. Use them only for short format hints, with a visible label above.

Sources