ui-048

Fieldset Forms UI Kit

£25

A browsable library of form controls and form structure on one token file: text, number, phone, masked and one-time-code inputs, selects, comboboxes, date, time, colour and file pickers, steppers, validation, error summaries and success states, plus five complete forms that open as working pages, light and dark.

FlipDraggable advanced

15 more details

token-themingtheme-switchform-animationform-validationflip-layoutdragkeyboard-navigationfocus-managementdialog-animationstaggerstate-transitionmicro-interactionprogress-barsvg-line-drawcount-up

Fieldset Forms UI Kit - UI component kit preview

The kit's assembled screens, full window and fully interactive:

View interactive demo: Contact form Checkout Sign up Application Account settings

About this kit

Fieldset is a component library for forms rather than a demo of one form. The page you see is the library itself: an index down the left, a search that filters it, and every control shown live at product density in the states a buyer checks, grouped into foundations, controls, text inputs, selection, pickers and uploads, form structure, validation and feedback, and five forms composed from the parts above.

Read the full effect overview

Every component reads one token file, so a select, a date picker, a file upload and a submit button agree about surface, ink, line, radius, spacing and motion, and the light and dark themes are the same design at two sets of values. The register is a payments company's contact and checkout forms: a cool off-white ground, white fields with hairline borders, slate ink rather than black, one violet accent that means primary, selected or focused, and colour otherwise reserved for status.

Each component ships in its own folder with its markup, its stylesheet and its script, so you can take one control or link the two bundled files and take everything. Every control drives a real form field so a plain form submits it; every list, calendar and popover opens through one shared layer so Escape, focus and scroll behave once; and the motion is short, layered product motion with GSAP, with a reduced-motion state throughout.

The five forms are not screenshots. A contact form with artwork upload, a checkout, a sign-up with a one-time code, a four-step application and an account settings page each open as a full page (contact.html and its siblings) that validates, uploads, steps and submits to a success state. Each is composed from the components with include directives and a short glue script, so a form is also the worked example of how the parts fit together.

What's included

13 items

Sixty-one components in eight families, each in its own folder with markup, styles and script
A searchable catalogue page with an index rail, family groups and a theme toggle
One token file driving light and dark; no component holds a colour of its own
Text, textarea, password with strength, phone with dial codes, currency and unit numbers, masked card and bank fields, one-time code and inline edit
Select, combobox, multi-select, tag input, address autocomplete, country and region, colour and time pickers on one shared menu style
Date and date-range pickers, a file upload with per-file progress and retry, an image upload and a signature pad
Form structure: field anatomy, fieldsets, sections, grids, inline forms, action bars, a multi-step stepper, collapsibles, conditional fields, a repeater with a running total and consent
Validation with live timing rules, an error summary that links to fields, a submit button that morphs through loading and success, toasts, inline alerts, tooltips, popovers and dialogs
Every control drives a real form field, so a plain form submits it without any script of yours
Keyboard and ARIA contracts on every control, with live announcements for state changes
Reduced-motion end states throughout; nothing animates while off screen
Five forms that open as working pages: a project brief with artwork upload, a checkout, a sign-up with a one-time code, a four-step application and account settings
Forms composed from the components with include directives, never redrawn, so each is a worked example of how the parts fit together

Perfect for

5 use cases

A contact, quote or enquiry form with file upload on a company site
A checkout or booking flow that needs address, delivery and card fields that behave
Sign-up, onboarding and account settings in a SaaS product
A job application, survey or multi-step intake form
A design system starting point where the form controls are the deliverable and the tokens prove them

How it works

3 sections

The library is the page

The catalogue is generated from the component folders, so what you browse is exactly what you download. The rail lists every component by family, the search filters both the rail and the specimens, and each specimen is the control in every state a buyer would check, with product copy rather than placeholder text.

One token file, two themes

Surfaces, ink, lines, accent, status colours, radii, spacing, control heights, durations and eases are role-named custom properties in one file. The dark theme re-values the same names, so a component never branches on the theme and a rebrand is one edit. Two of those tokens, the pill radius on buttons and the 6px radius on fields, are the register's signature and take one line each to change.

Real form fields underneath

A custom select keeps a native select in the DOM, a masked card number writes its digits to a hidden input, a date picker carries an ISO date, a signature pad carries a data URL. Submit the form and the values are there, so the components work with any backend, any framework and no JavaScript of yours.

Plugins Flip, Draggable

Difficulty Advanced

Includes Every component in its own folder of markup, styles and script, the assembled screens, the two bundles, documentation, AI setup prompt, lifetime updates

Questions about this component kit

Can I take one control without the rest?

Yes. Each control has its own folder holding its markup, its stylesheet and, where it is scripted, its script. A project that only wants the date range picker or the file upload links tokens.css, base.css and base.js, then that one folder, and pastes the fieldset. The base files carry the field shell, label and hint positions and validation states every control shares. A project using the whole kit links the two bundled files instead. The catalogue page and its specimen rail are demo furniture.

Do the fields actually submit, and how do I hook up my backend?

Every control drives a real form field: a native input, select or textarea, or a hidden input the script keeps in step. Wrap the markup in your own form and the browser submits the values as usual, or read them from the form on submit and post them yourself. The file upload exposes a documented hook for your upload request and reports progress per file; the simulated progress in the demo is the only thing you replace.

What kind of site or app does this suit, and how do I rebrand it?

Anything with forms: a company site's contact and quote pages, a checkout, a sign-up, an application, a settings area. The worked example is a print studio, but nothing in the layout says so except the words. Rebranding is editing tokens.css: change the accent, the ground, the ink ramp, the face, the pill radius on buttons or the radius on fields, and every component follows in both themes.

Which framework is it for?

None in particular. The controls are native form elements with classes and a few data attributes, styled by CSS custom properties and driven by plain JavaScript with GSAP, so they work in a static HTML form, a server-rendered page or a React, Vue, Svelte or Astro component. Because every control writes to a real input, select or textarea, a framework's own form handling reads the same values it would from an unstyled field. Render the markup, call the init after mount, and the validation and pickers attach themselves.

What happens on a phone?

Side-by-side labels stack above their fields, grids collapse to one column, the date range shows one month, the time picker's columns fill the width, dialogs and pickers sit at the bottom of the screen, the signature pad and the sliders take touch, and every hover affordance also appears on focus and on tap. The catalogue's rail becomes an Index button opening a sheet.

Is validation included, or do I bring my own?

Included. Fields validate on blur after first touch, re-validate as you type once invalid, and all validate on submit; the error summary at the top links to each field and focuses it. The rules are data attributes on the fields (required, email, minimum length, pattern, match another field), so you can add a rule without touching the script, and the hooks let a server-side error land in the same place.

Paid component kit

Purchase to unlock the code.

Buying Fieldset Forms UI Kit opens every component as its own folder of markup, styles and script, the assembled screens and both bundles, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects.

£25 Standard license, unlimited projects

Browse UI elements

Documentation

Quick Start

There are two ways in. Both need GSAP (core; Flip for the reflows and Draggable for the repeater and the banner image).

Everything, two files. In <head>:

Code snippet omitted: it ships with the download.

At the top of <body>, paste the contents of assets/icons.svg once (it is an SVG sprite; the icons reference it with <use href="#i-name">). Before </body>:

Code snippet omitted: it ships with the download.

Then copy any component's fragment from components/<name>/specimen.html into your form.

One component. Link assets/tokens.css, assets/base.css and the component's components/<name>/style.css; load GSAP, assets/base.js and the component's components/<name>/script.js; paste its specimen.html. tokens.css, base.css and base.js are required by everything; a component's own files are all it adds.

The scripts find every instance of their component by its data-kit attribute and initialise each once, so the same fragment can appear as many times as you need. If you render the markup from a framework, call the init after mount (each script is an IIFE that runs on DOMContentLoaded or immediately if the DOM is already parsed; reloading it, or dispatching a synthetic DOMContentLoaded, initialises anything new).

What's Included

index.html: the catalogue, every component assembled. Generated from components/ and kit.json; the rail and search are demo furniture
contact.html, checkout.html, signup.html, application.html, settings.html: the five forms as full pages
kit.json: the manifest: families, components, their root selectors and keyboard contracts
components/<name>/: one folder per component: specimen.html (the fragment), style.css, script.js
assets/tokens.css: the design system: every surface, ink, line, accent and status colour, the type scale, spacing, radii, control heights, durations and eases, in two themes
assets/base.css: reset, type ramp, the shared primitives (.btn, .input, .label, .hint, .error, .field, .field--side, .kbd, .badge, .avatar, .icon, .card, .menu, .layer) and layout utilities
assets/base.js: window.Kit, the shared runtime: the overlay layer stack, positioning, focus helpers, motion tokens, the theme switch, a live region
assets/icons.svg: the icon sprite
assets/style.css and assets/script.js: the two bundles, generated from the files above
assets/catalogue.css and assets/catalogue.js: the catalogue page chrome only; not needed in a product

The five forms

Each form has two lives. In the catalogue it is a specimen in a fixed frame, so you can see the parts compose. As a page it fills the viewport and behaves like the product: fields validate, the upload runs, the stepper steps, the submit button morphs through loading and the success state replaces the form.

Contact (contact.html) is the worked example: a project brief with contact details, a service select, a budget slider, a delivery date, the brief itself, artwork upload with per-file progress, consent, and a success state with a reference number.
Checkout (checkout.html): address autocomplete, delivery options as choice cards, card details with masks and brand detection, a promo code and an order summary that updates.
Sign up (signup.html): email and a password with a strength meter, a one-time code step, then company and role.
Application (application.html): a four-step job application with the stepper, a CV upload, questions with conditional fields, and a review step.
Account settings (settings.html): profile with avatar upload, notification switches, a password change, and a danger zone with a confirm dialog.

Every form is composed from the components with include directives in its specimen.html and a short glue script.js; nothing in a form is markup you cannot also find in a component folder.

Components

Foundations

The tokens every control reads, so a rebrand is one file.

Component	Folder	Root
Colour roles	`components/colors/`	`assets/tokens.css`
Type ramp	`components/typography/`	`assets/tokens.css`
Icons	`components/icons/`	`assets/icons.svg`
Field anatomy and spacing	`components/layout/`	`assets/base.css`

Controls

The things a hand rests on. Every one has a keyboard route and a disabled state.

Component	Folder	Root	Keyboard
Button	`components/button/`	`.btn`	Enter, Space
Icon button	`components/icon-button/`	`.btn--icon`	Enter, Space
Switch	`components/switch/`	`[data-kit="switch"] .k-switch__control`	Space
Checkbox and radio	`components/checkbox-radio/`	`.k-checkbox-radio__item`	Space; arrows within a radio group
Choice cards	`components/choice-cards/`	`.k-choice-cards`	Space; arrows within the radio set
Segmented control	`components/segmented-control/`	`[data-kit="segmented-control"] [role="radiogroup"]`	Arrows, Home, End
Chip group	`components/chip-group/`	`.k-chip-group`	Space toggles; arrows move
Quantity stepper	`components/quantity-stepper/`	`[data-kit="quantity-stepper"] .k-quantity-stepper__field`	Arrows, typing, Home, End
Slider	`components/slider/`	`.k-slider`	Arrows, Home, End, PageUp, PageDown
Rating	`components/rating/`	`[data-kit="rating"] [role="radiogroup"]`	Arrows, numbers 1 to 5

Text inputs

Fields that take typing. Each shows its label, hint, error and disabled state.

Component	Folder	Root	Keyboard
Text field	`components/text-field/`	`.k-text-field__item`	Native
Textarea	`components/textarea/`	`.k-textarea__item`	Native
Password field	`components/password-field/`	`.k-password-field__item`	Native; Enter on the reveal button
Phone field	`components/phone-field/`	`.k-phone-field__item`	Native; arrows in the country list
Number field	`components/number-field/`	`.k-number-field__item`	Arrows step; typing
Masked input	`components/masked-input/`	`.k-masked-input__item`	Native; the mask skips separators
Search field	`components/search-field/`	`.k-search-field`	/ focuses, Escape clears
One-time code	`components/otp-field/`	`.k-otp-field`	Digits advance, Backspace retreats, paste fills
Inline edit	`components/inline-edit/`	`.k-inline-edit`	Enter edits and saves, Escape cancels

Selection

Choosing from a list. Every list opens through the shared layer so Escape and focus behave once.

Component	Folder	Root	Keyboard
Select	`components/select/`	`[data-kit="select"] .k-select__field`	Arrows, type-ahead, Enter, Escape
Combobox	`components/combobox/`	`[data-kit="combobox"] .k-combobox__field`	Arrows, Enter, Escape, typing filters
Multi-select	`components/multi-select/`	`[data-kit="multi-select"] .k-multi-select__field`	Arrows, Enter toggles, Backspace removes the last chip
Tag input	`components/tag-input/`	`.k-tag-input`	Enter or comma adds, Backspace removes
Address autocomplete	`components/address-autocomplete/`	`.k-address-autocomplete`	Arrows, Enter, Escape
Country select	`components/country-select/`	`[data-kit="country-select"] .k-country-select__field`	Arrows, type-ahead, Enter, Escape
Colour picker	`components/colour-picker/`	`.k-colour-picker`	Arrows on the swatches; typing a hex
Time picker	`components/time-picker/`	`[data-kit="time-picker"] .k-time-picker__field`	Arrows, typing, Enter, Escape

Pickers and uploads

Dates, files and drawn input: the controls that take something other than typing.

Component	Folder	Root	Keyboard
Date picker	`components/date-picker/`	`[data-kit="date-picker"] .k-date-picker__field`	Arrows move days, PageUp and PageDown months, Enter picks, Escape closes
Date range picker	`components/date-range-picker/`	`[data-kit="date-range-picker"] .k-date-range-picker__field`	Arrows, Enter twice, Escape
File upload	`components/file-upload/`	`.k-file-upload`	Enter on Choose files; Tab reaches each row's actions
Image upload	`components/image-upload/`	`.k-image-upload`	Enter opens the picker
Signature pad	`components/signature-pad/`	`.k-signature-pad`	Tab to the typed alternative; buttons for clear and undo

Form structure

How fields sit together: anatomy, groups, sections, steps and the bits that appear conditionally.

Component	Folder	Root	Keyboard
Form page	`components/form-page/`	`.k-form-page`	Native
Field	`components/field/`	`.k-field`	Native
Fieldset	`components/fieldset/`	`.k-fieldset`	Native
Form section	`components/form-section/`	`.k-form-section`	Native
Form grid	`components/form-grid/`	`.k-form-grid`	Native
Inline form	`components/inline-form/`	`.k-inline-form`	Enter submits
Form actions	`components/form-actions/`	`.k-form-actions`	Native
Form stepper	`components/form-stepper/`	`.k-form-stepper`	Enter continues; steps are links once visited
Collapsible	`components/collapsible/`	`.k-collapsible`	Enter or Space toggles
Conditional fields	`components/conditional-fields/`	`.k-conditional-fields`	Native
Repeater	`components/repeater/`	`.k-repeater`	Enter on Add; Tab through each row
Consent	`components/consent/`	`.k-consent`	Space

Validation and feedback

What the form says back: errors, progress, confirmation and the overlays a form opens.

Component	Folder	Root	Keyboard
Validation	`components/validation/`	`.k-validation`	Native
Error summary	`components/error-summary/`	`.k-error-summary`	Enter on an item moves focus to the field
Submit button	`components/submit-button/`	`.k-submit-button`	Enter, Space
Toast	`components/toast/`	`Kit.toast({ title, body, action })`	Escape dismisses the newest
Inline alert	`components/inline-alert/`	`.k-inline-alert`	Native
Tooltip	`components/tooltip/`	`[data-tooltip]`	Focus shows
Success state	`components/success-state/`	`.k-success-state`	Native
Dialog	`components/dialog/`	`[data-kit="dialog"] .k-dialog__layer`	Escape, Tab trapped, Cmd/Ctrl+Enter confirms
Popover	`components/popover/`	`[data-kit="popover"] .k-popover__panel`	Escape, outside press

Forms

Five complete forms composed from the components above, each also a full page.

Component	Folder	Root	Keyboard
Contact form	`components/contact-form/` and `contact.html`	`.k-contact-form`	Tab through; Enter submits
Checkout	`components/checkout-form/` and `checkout.html`	`.k-checkout-form`	Tab through; Enter submits
Sign up	`components/signup-form/` and `signup.html`	`.k-signup-form`	Tab through; Enter continues
Application	`components/application-form/` and `application.html`	`.k-application-form`	Tab through; Enter continues
Account settings	`components/settings-form/` and `settings.html`	`.k-settings-form`	Tab through; Cmd/Ctrl+S saves

Themes

The theme is one attribute on the root: <html data-theme="light"> or dark. assets/tokens.css defines every value for both; no component has a theme branch, and the scripts never read the theme. Kit.theme.set('dark') switches it, remembers it in localStorage and dispatches kit:theme on the document for anything that reads a colour at runtime (the colour picker's pad re-renders on it).

To rebrand, edit tokens.css: --accent and its hover, active, ink and wash values; the --bg* surfaces; the --ink* ramp; --font-ui; and the two signature tokens, --radius-btn (pill buttons) and --radius-field (6px fields). Keep the contrast pairs the colour sheet in the catalogue reports at 4.5:1 or above in both themes.

Motion and reduced motion

Durations and eases are tokens (--dur-fast, --dur-base, --dur-slow, --ease-out, --ease-inout, --ease-spring) read by CSS and by Kit.dur() / Kit.ease(). Under prefers-reduced-motion: reduce, Kit.dur() returns 0 and every component mounts and changes state in its final position; the progress bars, drawn checks and reveals complete at once. Nothing runs a ticker while it is off screen (Kit.onVisible).

Keyboard contract

Every overlay in the kit (select, combobox, multi-select, country, colour and time pickers, the two calendars, popovers, dialogs, the recent-searches menu) opens through Kit.layer.open(), which owns Escape, the focus trap on modal layers, focus return to the trigger and the scroll lock. The per-component keys are in the table above; the patterns follow the WAI-ARIA Authoring Practices (combobox, listbox, grid for calendars, radiogroup for segmented controls and choice cards, switch, slider, tablist for nothing here, dialog).

What is demo-only

assets/catalogue.css and assets/catalogue.js draw the catalogue page: the rail, the search, the specimen frames and the theme toggle. Buttons in a specimen marked "demo" in its comment (Simulate drop, Fail next, Replay, Fire five) exist so the catalogue can show a state that needs a server or a real file. The upload(file, onProgress) hook in the file upload and the simulated verification in the one-time code field are the two places you connect a request.

Requirements

GSAP 3.12+ (built against 3.15.0); Flip and Draggable from the same release
Any modern browser; the components use :has(), inset, container-free layout and IntersectionObserver
No build step, no framework, no dependency beyond GSAP and the Inter web font

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.