Fylgja - Form

The form component is super easy to use, it's a zero config module that styles all form elements directly.

Allowing you to focus on the form itself.

Installation

npm install @fylgja/form

Then include the component in to your code via;

@use "@fylgja/form";
// Or via PostCSS import
@import "@fylgja/form";

Styles

By default all form styles are set to the fylgja default style.

If you want to use the field or box style, change the variable $form-style to one of the other options.

Or if you are importing this as plain CSS or in PostCSS use;

@import "@fylgja/form/field.css";
@import "@fylgja/form/box.css";

For versions older than v1.2 use style-{field|box}.css

@layer support

If you need support for @layer, use the following import;

@use "@fylgja/form" with ($form-layer: "components");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/form" layer("components");

How to use

For more information see the form docs on the Fylgja.dev.

Changelog

All notable changes to this project will be documented in this file.

The format is based on Keep a Changelog, and this project adheres to Semantic Versioning.

[Unreleased]

[1.1.6] - 2023-09-02

Fixed

• SCSS new function syntax missing

[1.1.5] - 2023-05-16

Fixed

• Issue with overflow on select with attribute multiple

[1.1.4] - 2023-05-10

Fixed

• Alignment for calendar icon in chrome

[1.1.3] - 2023-02-19

Changed

• Simplified @layer support, CSS can use native, for SCSS use the new variable $form-layer, the options from v1.1 are deprecated

[1.1.1] - 2023-02-05

Added

• support for @layer for style version

Changed

• import syntax for field and box to just the name, no style prefix needed, older import syntax will be dropped in v2

[1.1.0] - 2023-02-05

Added

• support for @layer in components scope

[1.0.8] - 2022-08-09

Fixed

• border color getting merged with main border, with v2 setup changes

[1.0.7] - 2022-06-12

Fixed

• syntax for $form-fields using the newer v2 version already, now uses the v1 version again

[1.0.6] - 2022-06-06

Fixed

• Padding inline end missing for file input text

[1.0.5] - 2022-06-05

Added

• Moved select style logic to mixin

Fixed

• file input incorrect rendering of negative margin padding hack, [Possible Breaking Change] $form-file-gap-[y/x] has no effect anymore, will be dropped in v2
• safari data input height difference
• safari overflow in long option text for select field (fixes #66)

[1.0.4] - 2022-03-21

Added

• scss option added, to set the $label-margin

[1.0.3] - 2021-11-27

Changed

• [Possible Breaking Change] removed input prefix from type, Making it easier to edit the form styles with utility classes
• Removed form prefix from CSS imports for style versions

[1.0.2] - 2021-08-22

Fixed

• input color radius var is empty when null
• missing focus style var, and merged border width and style to keep supporting CSSNano

[1.0.0] - 2021-06-22

Initial Release 🎉