Forms

Debounced address-search UI shell with keyboard-navigable suggestions dropdown; geocoding is supplied by the host via props.

React

Multi-select add-on cards with the radio-card visual language but native checkbox semantics, zero JS.

Astro

An in-form consent fieldset: a required legal-acceptance checkbox with an error state, plus granular per-channel marketing opt-ins, each its own named checkbox so consent is recorded separately.

Astro

Single-column name/email/subject/message contact form with a honeypot field, Netlify Forms opt-in, and a presentational action prop.

Astro

Two-column contact layout with a named aside slot for a map or office photo, stacking to one column on mobile.

Astro

Styled native date and time input pair with a combined human-readable preview and a clear action.

React

A Continue with Email button that morphs in place into an email field on click — the progressive-disclosure auth pattern, reduced-motion safe.

React

The WCAG error-summary pattern for long forms: an assertive live region listing every invalid field as a jump-to link, self-focusing on mount after a failed submit.

React

Drag-and-drop file picker with browse fallback, size validation, and a removable selected-files list.

React

Horizontal row of togglable multi-select filter chips with an active count and clear-all action.

React

Vertical catalog filter stack with collapsible checkbox groups and a price range, built on native details elements.

Astro

Post-submit status panel with success, error, and pending states for the host to swap in after a submission resolves.

Astro

Reference demo of idle/valid/invalid inline field validation with live icons and messaging on blur.

React

Email/password sign-in card with a show/hide password toggle driven by a scoped inline script.

Astro

Three-step form with a segmented progress bar, per-step validation, and back/next navigation before calling onSubmit.

React

Standalone card-format newsletter opt-in with an icon badge and privacy microcopy.

Astro

A slim single-row email capture bar for footers or in-content placements.

Astro

Segmented one-time-code field with auto-advance, backspace-to-previous, and full-code paste support.

React

Single-field reset-link request card with a built-in confirmation state toggled via a sent prop.

Astro

A combined country-dial-code select and national-number input with digit-only sanitisation, emitting one combined E.164-shaped value.

React

Project-type selector, scope slider, and add-on checkboxes that compute a live price range before submitting.

React

Large selectable radio-as-card tiles for plan or shipping-method pickers, built on native radios with zero JS.

Astro

Single budget or quantity slider with a live value readout driven by a small scoped inline script.

Astro

Accessible star-rating field built on labeled native radio inputs with hover preview.

React

ARIA combobox search field with keyboard-navigable, client-filtered suggestions dropdown.

React

Custom single-select ARIA listbox with type-to-filter and full keyboard support.

React

Name/email/password sign-up card with an inline password-strength meter and terms-acceptance checkbox.

Astro

A composable OAuth Continue with row for Google, GitHub, Apple and Facebook with inline icon marks and no icon-library dependency.

Astro

Two native date inputs with linked bounds that preserve an ordered start and end date.

React

Accessible grouped native select with a label, description, invalid state, and mobile device picker.

Astro

Keyboard-friendly tag entry with duplicate prevention, paste support, a limit, removable tokens, and form values.

React

Move chosen values between labeled checkbox lists with explicit buttons and native form submission.

React

Textarea with a live N/max counter that shifts to warning and error colour near the limit.

Astro

Stacked list of labeled on/off switches for notification preferences, built on native checkboxes with zero JS.

Astro