Fylgja component - Form

Table of Contents

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.


npm install @fylgja/form

Then include the component in to your code via;

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

How to use

Out of the box all the styling is done directly, so no extra steps are needed.

<input type="text" placeholder="text">
<input type="number" placeholder="number">
<input type="password" placeholder="password">
<input type="date" placeholder="data">
<option disabled selected value>Pick a option</option>
<option value="option1">option 1</option>
<option value="option2">option 2</option>
<input type="file" placeholder="file">
<textarea placeholder="textarea" rows="2"></textarea>
<input type="color" placeholder="color" value="#e91e63">


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/style-field.css";
@import "@fylgja/form/style-box.css";


As with almost all of our components, CSS variables can be configured to add your own look/style.

For direct control of the base styles, here are the following SCSS variables can you modify.

View SCSS variables
$enable-webkit-autofill-dark-mode: true !default;

$form-focus-color: var(
var(--color-theme, #{$color-theme})
) !default;
$form-placeholder-opacity: 0.5 !default;
$form-disabled-opacity: 0.7 !default;
$form-not-editable-border-style: dotted !default;

$form-transition-property: border-color, box-shadow !default;
$form-transition-speed: 150ms !default;
$form-transition-effect: linear !default;

$fieldset-margin: 1rem 0 !default;
$fieldset-padding: 0 !default;
$fieldset-border: 0 !default;

$legend-font-size: 1.25em !default;
$legend-margin: 1rem 0 !default;
$legend-padding: 0 !default;
$legend-border: 0 !default;

$form-style: default !default;
$form-styles: (
field: (
padding: 0.375em 1px,
border-width: 0 0 1px,
border-style: solid,
border-color: currentcolor,
radius: 0,
shadow: inset 0 -1px 0 $form-focus-color,
bg: transparent,
color: inherit,
file-btn-padding: 0.375em 0.625em,
file-btn-radius: 3px 3px 0 0
box: (
padding: 0.375em 0.625em,
border-width: 0 0 1px,
border-style: solid,
border-color: currentcolor,
radius: 4px 4px 0 0,
shadow: inset 0 -1px 0 $form-focus-color,
bg: if($root-fg == #000, #eee, #222),
color: inherit,
file-btn-padding: 0.375em 0.625em,
file-btn-radius: 4px 4px 0 0
) !default;

// Set styles var's
$form-padding: form-style-get(padding) !default;
$form-padding-y: if(
list.length($form-padding) == 2,
list.nth($form-padding, 1),
$form-padding-x: if(
list.length($form-padding) == 2,
list.nth($form-padding, 2),
$form-border-width: form-style-get(border-width) !default;
$form-border-style: form-style-get(border-style) !default;
$form-border-color: form-style-get(border-color) !default;
$form-radius: form-style-get(radius) !default;
$form-focus-style: form-style-get(shadow) !default;
$form-bg: form-style-get(bg) !default;
$form-color: form-style-get(color) !default;

// Form fields to load the styling on
$form-fields: (
) !default;

// Form select
$form-icon-size: 1.25em !default;
$form-icon-color: $color-text !default;
$form-select-icon: url("data:image/svg+xml,<svg .. /></svg>") !default;

// Form color
$form-color-radius: null !default;
$form-color-size: 2.375rem !default;
$form-color-padding: ($form-padding-y / 2) !default;

// Form file
$form-file-gap-y: $form-padding-y !default;
$form-file-gap-x: $form-padding-x !default;
$form-file-btn-gap: 1ch !default;
$form-file-btn-padding: form-style-get(file-btn-padding) !default;
$form-file-btn-radius: form-style-get(file-btn-radius) !default;
$form-file-btn-bg: var(--color-theme, #{$color-theme}) !default;
$form-file-btn-color: var(--color-on-theme, #{$color-on-theme}) !default;

form-style-get() is the map-get() function.

It gets the values from the $form-styles variable that contains the predefined form styles.

Inspect the helper.scss file tot see what is in the default styles.

Noticed a typo or is something unclear? Help us improve this page on GitHub.