Accessible Form Components

Static files, no build step. Serve the folder with any static server and open index.html:

In your downloadThe working code for this step.

To use a control in your own page:

1. Link the stylesheet and the core script. GSAP is optional.

In your downloadThe working code for this step, in index.html.

2. Add the script for each interactive control you use. Each control's entry names its file. Checkboxes, radios, switches, cards, native selects and plain inputs need none.

In your downloadThe working code for this step, in index.html.

3. Paste the control's HTML, then change its label, id and name.

In your downloadThe working code for this step, in index.html.

The controls are made to sit inside a design you already have.

• Font: inherited from your page. Set --fc-font only if the forms should differ.
• Colour, corners and size: set the variables below on :root, or on a wrapper to restyle only the forms inside it.
• Dark mode: add data-fc-theme="dark" to <html> or to any wrapper. It is the same variables at second values, which you can also change.
• What to keep: assets/style.css, assets/script.js and the assets/fc-*.js files for the controls you use.
• What to delete: the eight reference pages, assets/docs.css, assets/docs.js and assets/fc-forms.css (layout for the example forms page only). The bar at the top of the reference pages only sets the same variables you would set by hand.

In your downloadThe working code for this step, in style.css.

Variables

Fields and validation

A field is a .fc-field wrapper holding a label, an optional .fc-hint, the control and an empty .fc-error. Add data-fc-field and data-rules to validate it:

• Rules: required, email, url, number, digits, min:n, max:n (length), minvalue:n, maxvalue:n, pattern:regex, match:#other-field. Separate several with spaces.
• Messages: data-msg-<rule>="Your wording" on the field. Defaults exist for every rule.
• Your own rule: FC.rules.postcode = function (value) { return /.../.test(value); }, then data-rules="postcode".
• A field is checked when focus leaves it and re-checked while an error is showing. It is never checked while someone is still typing their first answer.

Forms

Add data-fc-form to a <form> to check every field on submit. If the form contains a data-fc-summary box, every problem is listed there with a link that focuses its field.

• fc:form-valid fires on the form when everything passes; event.detail.data is the FormData.
• fc:form-invalid fires with the list of failed fields.
• data-fc-form="demo" also stops the page navigating, which is how the example forms run. Remove ="demo" to let the form post normally.

Controls and their scripts

Every interactive control starts from a data-fc-* attribute on its markup and takes its options as further data- attributes, listed under each control on its page.

Custom controls keep their value in a real input (often a hidden one marked data-fc-value), so a normal form post and FormData include it. They fire fc:change on their root with the new value in event.detail.

Markup added later

Controls start automatically when the page loads. For markup you insert afterwards, call FC.init(element); before removing it, call FC.destroy(element).

Front end only

Nothing in this package sends data anywhere.

• Example forms: each validates and then simulates a request. Send the data yourself where the page's script is marked.
• Checkout: card fields format and check input but take no payment. Use your payment provider's fields for real payments.
• Address lookup: searches a short sample list. Set FC.addressSource to a function that returns a Promise of addresses to connect a lookup service.
• Dropzone and image upload: progress is simulated. Set FC.upload to a function that sends one file and returns a Promise to upload for real.
• Time slots: availability on the reference pages is worked out from the date so the demo is stable. Replace it with a call to your booking system.
• One-time code: the examples accept 123456. Check the code on your server.

Defaults, light then dark. All are variables in the first block of assets/style.css.

Every default text pair meets WCAG AAA contrast (7:1) in both themes, including text on the tinted fills (alerts, the error summary, a chosen card, a file dragged over a dropzone), and the border meets 3:1 against the ground, the field and the soft fill. The accent presets on the reference pages (green, orange, violet, ink) meet the same in both themes. An accent you choose needs 7:1 against the ground and the soft fill to keep that (4.5:1 for AA), because it is used for selected text and for the focus ring, and the text-on-accent colour needs the same against the accent.

None. The package ships no photographs or icon files. Icons are inline SVG, and image previews come from the files a visitor chooses.

The controls are built and tested to the WCAG 2.2 level AAA criteria, as shipped: the default palette, the default sizes and the markup on the reference pages. That is a statement about these files, not a certificate for your site. Conformance is judged on a finished page, so your own colours, copy and layout decide the result; if you change the accent or lower the control height, re-check contrast and target size (see Palette and Target size below). The checks were automated audits plus scripted keyboard, focus, reflow and reduced-motion tests, not an independent audit.

What that means in practice:

• Markup: native inputs wherever one exists; custom controls follow the WAI-ARIA patterns for combobox, listbox, calendar grid and slider. Groups of controls (radios, chips, the parts of a date, a phone number, a signature) are named groups.
• Keyboard: everything works from the keyboard, with no traps. Each control's page lists its keys where they go beyond the browser's own. The signature pad has a typed alternative, and the image gallery reorders with buttons as well as by dragging.
• Focus: a solid 2px ring in the accent colour, with a 2px gap on filled parts, meets the focus appearance criterion (at least 3:1 against what it replaces) in both themes. On the reference pages focus is never hidden under the sticky bar, and toasts move out of the way of a focused control.
• Target size: every pointer target is at least 44 by 44 CSS px at the default --fc-height: 44px. Small parts (the clear button in an input, a pill's remove button, a help button) keep their drawn size and get a transparent 44px hit area, with spacing so neighbouring areas never overlap. Below --fc-height: 44px the inputs themselves drop under 44px (they still clear AA's 24px). Two exceptions on narrow screens: a seven-column calendar needs 308px for 44px days, and a six-digit code needs 284px for 44px boxes; in a narrower column they shrink to fit.
• Labels and errors: labels, hints and errors are linked to their inputs, required fields are marked for assistive technology, and personal-data inputs carry autocomplete tokens. Error messages say what to do, and the error summary receives focus on a failed submit with a link to each field. A message is announced once, not on every key.
• Status: counts, uploads, copied text and saved states are announced through live regions without moving focus, and a character counter speaks after a pause in typing rather than on every key.
• Timing: nothing has a time limit. Toasts stay until dismissed; give duration only to a plain confirmation that the page also shows. A button's "done" tick lasts 1.6 seconds, so keep any result people need on the page too.
• Contrast: text meets 7:1 and control edges, state indicators and focus rings meet 3:1, in both themes and every state (see Palette). State is never shown by colour alone: errors have text, chosen options a tick, booked slots a line through, password strength a word.
• Motion: with reduced motion requested, or without GSAP, every state changes instantly; only the busy spinners keep turning, slowly.
• Text: nothing is cut off at 200% text size, at 320px wide or with increased letter, word and line spacing.
• Without JavaScript, native inputs, selects, checkboxes and radios still work and multi-step forms show as one long form.

• GSAP 3.15.0 from the jsDelivr CDN, optional. The controls need GSAP 3.12+ when it is present. No plugins are used.
• No other libraries, no fonts and no build tools.

Every control returns a cleanup that removes its listeners, stops its animations and deletes any markup it generated.

In your downloadThe working code for this step, in script.js.

FC.toast.destroy() removes the toast region.