← Home v1.3.0

Docs / Components / Inputs

Inputs

Accessible CSS text inputs with labels, hints, required markers and error states, plus inputs with icons, prefixes and suffixes. Works with plain HTML forms and any framework.

Inputs

Fields use the same raised surface as secondary buttons, so they look like part of the same family. On focus they get a brand-colour border and ring. Wrap each one in ace-field to stack the label, control and hint or error.

We'll send the booking confirmation here.

Use the format 01-123-AB.

<div class="ace-field">
  <label class="ace-label" for="email">Email <span class="ace-required">*</span></label>
  <input id="email" type="email" class="ace-input" placeholder="you@example.com"
         aria-describedby="email-hint" required>
  <p class="ace-hint" id="email-hint">We'll send the booking confirmation here.</p>
</div>

<!-- Error: aria-invalid="true" (or class="is-invalid") + .ace-error -->
<input id="plate" class="ace-input" aria-invalid="true" aria-describedby="plate-err">
<p class="ace-error" id="plate-err">Use the format 01-123-AB.</p>

<!-- 40px to sit next to a default button: ace-input--lg -->
Do
  • Always give a field a visible <label for>. A placeholder isn't a label.
  • Write the error message so it says how to fix the problem.
  • Set the right type, inputmode and autocomplete so phones show the right keyboard.
Don't
  • Shrink the font below 16px on mobile, because iOS will zoom in. The kit already handles this.
  • Show an error before the user has left the field or submitted the form.

Input with icon, prefix or suffix

Put a plain borderless <input> inside ace-input-group. The outer shell draws the border and the focus ring.

<label class="ace-input-group">
  <svg …/>
  <input type="search" placeholder="Search cars, customers…" aria-label="Search">
</label>

<label class="ace-input-group">
  <span class="ace-addon">€</span>
  <input type="number" aria-label="Price">
  <span class="ace-addon">/ day</span>
</label>

<!-- Error: add .is-invalid to the group -->

Use it

One stylesheet from the CDN, pinned to v1.3.0:

<link rel="stylesheet" href="https://acecss.dev/v1.3.0/ace.min.css"
      integrity="sha384-zHAwOqjifsc0D+iUvzD1a4W0R2g0BOK9AqQJZGakUEp/Tm5IUcP07R9xkY0q/stj" crossorigin="anonymous">

Or from npm:

npm i @acecss/core

import '@acecss/core'

Bundlers, Tailwind, every script in one file and self-hosting: Install.

More components

ButtonsCopy-paste CSS buttons with primary, secondary and danger styles, five colours, any brand colour via one variable, four sizes, icon buttons and a loading state. Dark mode built in, no JavaScript.
Hero buttonA sparkle call-to-action button for landing pages: a dark pill that turns brand-coloured on hover, with twinkling stars, a spark line round the edge and particles. No GSAP, respects reduced motion.
NavbarA sticky floating glass navbar: blurred, tinted pill with a sliding hover highlight, a raised shadow on scroll and a mobile menu that unfolds inside the pill. Framework-free, dark mode included.
Liquid navbarA liquid-glass navbar that refracts the real page behind it: a WebGL lens magnifies, bends content in at the rim with a colour fringe, frosts and lights the glass. Drop-in HTML, no framework.
Segmented controlA segmented control for switching views or options: a row of AceCSS buttons with aria-pressed, in three sizes and a full-width variant. Accessible, dark-mode ready, no JavaScript needed for the styles.
Select & dropdownStyle native selects and textareas, or turn any <select> into a searchable dropdown with sub-labels and option groups. About 3 KB of JavaScript, keyboard accessible, no dependencies.
Date pickerA dependency-free date picker and pick-up → return date range picker with times, min and max dates, locales and a change event. Dates can be typed or picked. About 5 KB of JavaScript, dark mode ready.
Checkbox, radio & switchStyled native checkboxes, radio buttons and toggle switches in pure CSS: accessible labels, focus rings and dark mode, with no JavaScript.
BadgesStatus badges in pure CSS: neutral, primary, success, warning, danger and info, in two sizes, with contrast checked for white text.
Choice cardsSelectable cards for plans, extras or options: built on AceCSS buttons, selected with a class, aria-pressed or a checked radio inside. Pure CSS, accessible, dark mode ready.