Fylgja - Input-group

The input group extends upon the @fylgja/form,

by providing a wrapper that allows for more complex form field styles,

like a search bar with button in the same form field.

Installation

npm install @fylgja/input-group

Then include the component in to your code via;

@use "@fylgja/input-group";
// Or via PostCSS import
@import "@fylgja/input-group";

Styles

By default the form style is set to our default style.

To use the field or box style. Change the variable $input-group-style. To one of the options, via;

@use "index" with ($input-group-style: box);

Or if you are a importing this as plain CSS in PostCSS or any other option. Import the style directly via;

@import "@fylgja/input-group/field.css";
/* Or */
@import "@fylgja/input-group/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/input-group" with ($input-group-layer: "components");
// Or via native CSS import, also supported by PostCSS import
@import "@fylgja/input-group" layer("components");

How to use

For more information see the input-group docs on the Fylgja.dev.