JavaScript Widget Library

FormWidgets
Library

A comprehensive, production-ready collection of 20 form widgets with full keyboard navigation, accessibility support, and professional styling.

Browse Docs
20
Widget Types
0
JS Dependencies
100%
Keyboard Nav
ARIA
Accessible

Quick Start

1

Licence

All widgets are released under the Unlicense. Free to use in personal and commercial projects without attribution.

Use at your own risk. The author takes no responsibility for any damages or issues arising from the use of this software.

2

Download FormWidgets

Download the CSS and JavaScript files for offline use.

Download CSS Download JS
3

Include CSS & JS

Add the widget stylesheet and script to your HTML page.

<link rel="stylesheet" href="<c:url value='/form-widgets/css/form-widgets.css'/>">
<script src="<c:url value='/form-widgets/js/form-widgets.js'/>"></script>
4

Add HTML

Use class names on standard HTML elements for auto-initialization.

<input type="text" class="fw-datepicker">
<input type="text" class="fw-currency" data-symbol="£">
<input type="text" class="fw-phone" data-pattern="+44 ## #### ####">
5

Initialize

Call autoInit() to activate all widgets, or init() for specific elements.

// Auto-init all widgets on the page
FormWidgets.autoInit();

// Or init a specific widget
FormWidgets.init('#myDate', 'DatePicker', {
  displayFormat: 'DD/MM/YYYY'
});
6

Support this Project?

Want to support this project or simply say thanks.

Widgets

DatePicker

Calendar popup with month/year navigation. Supports min/max dates, weekend exclusion, and custom formats.

fw-datepicker
Docs Examples

TimePicker

Time selection with hour, minute, and optional second dropdowns. Manual input supported.

fw-timepicker
Docs Examples

DateTimePicker

Combined date and time picker in a single field. Full calendar with time selectors.

fw-datetime
Docs Examples

DateRangePicker

Select start and end dates with dual calendar view. Visual in-range highlighting and date exclusions.

fw-daterange
Docs Examples

CurrencyField

Formatted currency input with configurable symbol, decimal places, and min/max validation.

fw-currency
Docs Examples

PhoneField

Pattern-based phone number input with auto-formatting. UK number support with +44 leading-zero removal.

fw-phone
Docs Examples

EmailField

Email address input with real-time validation and visual feedback.

fw-email
Docs Examples

Autocomplete

Type-ahead search with text highlighting, label/value pairs, remote API support, and keyboard navigation.

fw-autocomplete
Docs Examples

SelectField

Styled select dropdown with custom popup. Chevron animation, keyboard navigation, mobile-native fallback.

fw-select
Docs Examples

SelectionContainer

Multi or single select with chips or checkbox/radio display modes. Keyboard-navigable.

JS Init
Docs Examples

FileUpload

File input with type validation, size limits, and visual file preview feedback.

fw-fileupload
Docs Examples

Tooltip

Contextual popups displaying title text or custom HTML. Supports positioning, variants, and dynamic content.

fw-tooltip
Docs Examples

Menu

Versatile menu widget supporting static lists, dropdowns, context menus, and nested submenus.

fw-menu
Docs Examples

ButtonGroup

Links multiple buttons into a single side-by-side group with joined borders and rounded outer corners.

fw-button-group
Docs Examples

Collapsible

Expandable content block with a clickable header and toggle icon. Supports any header level.

fw-collapsible
Docs Examples

Toast

Non-blocking notification popups. Supports success, error, warning, and info states with auto-dismiss.

fw-toast
Docs Examples

Modal

Accessible dialog overlays for focused tasks. Supports sizes, animations, and backdrop interactions.

fw-modal
Docs Examples

Tabs

Organize content into multiple sections. Supports horizontal and vertical layouts with keyboard navigation.

fw-tabs
Docs Examples

Slider

A draggable range input with custom styling, tooltips, and keyboard support. Replaces native range inputs.

fw-slider
Docs Examples

Fab

Floating Action Button. Supports fixed positioning and "speed dial" expansion for multiple actions.

fw-fab
Docs Examples

Key Features

Full Keyboard Navigation

Arrow keys, Enter, Escape, Tab — every widget is fully operable without a mouse.

ARIA Accessible

Complete ARIA attributes and screen reader support throughout.

CSS Custom Properties

Full dark mode support via CSS variables. Easily theme to match your design system.

International

Multiple date formats, currency symbols, and phone number patterns for global use.

No Dependencies

Zero runtime dependencies. Only Font Awesome for icons.

Mobile Friendly

Smart popup positioning and native fallbacks on mobile devices.

Data Attributes

Configure any widget via HTML data-* attributes — no JavaScript required.

Pattern Placeholders

Fields show their expected format (e.g. DD/MM/YYYY) as a placeholder when empty.

Browser Support

Browser Version Support Notes
ChromeLatest FullRecommended browser for testing
EdgeLatest FullChromium-based, full support
FirefoxLatest FullAll features supported
SafariLatest FullAll features supported
Mobile BrowsersModern FullNative select used on mobile for SelectField