Fylgja Form Extend
Enhance your forms with advanced features, including native validation and flexible base and component styles for a wide range of form fields.
Installation
npm install @fylgja/form-extendpnpm add @fylgja/form-extend<link href="https://cdn.jsdelivr.net/npm/@fylgja/form-extend/index.min.css" rel="stylesheet">Usage
Once installed, you can import the full package with:
@import "@fylgja/form-extend";Alternatively, if you only need specific parts, you can import them individually:
| Import Path | Description |
|---|---|
@fylgja/form-extend/field-error | Styles for form validation and error messages |
@fylgja/form-extend/meter-progress | Styles for <meter> and <progress> elements |
@fylgja/form-extend/range | Styles for the <input type="range"/> element |
@fylgja/form-extend/range-fill | Adds a CSS-only value fill to the <range> element |
@fylgja/form-extend/range-vertical | Adds .range-vertical modifier |
Form Validation
The @fylgja/base theme automatically gives form fields a red outline when an error occurs.
Fylgja Form Extend takes this further with the field-error helper class,
making it simple to display clear error messages.
Use the field-error-message class to keep error messages hidden until the associated form field has an error.
Pairing this with the aria-errormessage attribute ensures a better experience for users with screen readers.
Error messages are always scoped within a common field wrapper,
so they’ll work even if the error message isn’t placed directly next to the form field.
This also supports the [aria-invalid] attribute.
If set to true, the error message will be shown.
Meter and Progress Elements
Fylgja Form Extend provides default styles for both <meter> and <progress> elements,
ensuring they are consistent with the rest of your form components.
Since they share the same base, their styles are combined into a single, lightweight CSS file.
Range Element
Styling range sliders can be tricky due to inconsistent browser implementations. Fylgja simplifies this process, providing consistent styles across different browsers.
You can customize the range element with CSS variables. This allows you to update the value with just a little bit of JavaScript.
<label for="input-range">Input Range</label>
<input
type="range"
name="input-range"
id="input-range"
value="40"
style="--range-value: 40"
oninput="this.style.setProperty('--range-value', this.value)"
>For those who want to be a bit more adventurous,
the range-fill version offers a CSS-only solution for the value fill,
eliminating the need for JavaScript.
NOTE
This feature relies on scroll animations, which may not be supported in all browsers. Firefox uses a native fill method, while Chrome and Safari depend on scroll animations. Safari only supports this from version 26 onward, so whether this CSS-only method works for you depends on which Safari versions you need to support (Fylgja’s baseline goes back to 18). Use the JavaScript solution alongside it if you need to cover older versions.
Vertical Modifier
To change the orientation of a range slider to vertical, add the .range-vertical class to the input element.
Examples
Below are examples showcasing each part of the Fylgja Form Extend in action.
Form Validation
Invalid Email Address, please use a email in the format
me@example.com
Meter and Progress element
Range element
FAQ
Do I need JavaScript for range slider fills to work?
Not necessarily. The default range styling needs a small JS snippet to update --range-value on input, as shown above. The range-fill import provides a CSS-only alternative using scroll-driven animations, supported in Safari 26+. If you need to support older Safari versions (Fylgja's baseline goes back to 17), use the JavaScript approach instead.
Why isn't the value fill working in Safari?
range-fill depends on scroll-driven animations, which Safari only supports from version 26 onward. It works fine there, but if you still need to support Safari 17 through 25, use the JavaScript-based approach instead.
How do I show a validation error message for a field?
Add aria-errormessage on the input pointing to an element with the field-error-message class, and wrap both in a common .field container. The message stays hidden until the field is invalid or has aria-invalid="true" set.
Does field-error-message work if the message isn't right next to the input?
Yes, as long as both the input and the message are inside the same .field wrapper, the error message will show correctly even if it's not placed directly next to the field.
How do I make a range input vertical?
Add the range-vertical class to the <input type="range"> element, as shown in the "Volume" example above.