@fylgja/input-group
@fylgja/input-group
npm i @fylgja/input-group
@fylgja/input-group

@fylgja/input-group

The modular highly customisable CSS framework. Powered by CSS Components, Utilities and Props for building your Web UI.

by fylgja

1.1.3 (see all)License:MITTypeScript:Not Found
npm i @fylgja/input-group
Readme

Fylgja - Input-group

NPM version license

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/style-field.css";
/* Or */
@import "@fylgja/input-group/style-box.css";

How to use

The input group allows you to build simple things, like a search form with a submit button in the same form field.

<form id="search-form">
    <label for="search">Search</label>
    <div class="input-group">
        <input type="search" name="search" />
        <button class="btn -icon input-icon">
            <svg>..</svg>
        </button>
    </div>
</form>

To more complex things.

The main focus is that you have the freedom to add anything.

Input icon

The .input-icon is an optional class that works wel for visual extra's.

The icon shares the same border color as the input border color, and so will also receive the focus color when the input-group has focus.

Note If a svg is a direct child of the .input-group, this will work the same as adding the .input-icon class

Config

The @fylgja/input-group inherits all of its variable values, from the @fylgja/form component.

So for what each variable you can do. See the the doc from the @fylgja/form component.

Or override it directly. Via the variables found down here;

View SCSS variables
$input-group-style: default !default;
$input-group-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;
$input-group-styles: map.merge($input-group-styles, $form-styles);

$input-group-border-width: $form-border-width !default;
$input-group-border-style: $form-border-style !default;
$input-group-border-color: var(--form-stroke, #{$form-border-color}) !default;
$input-group-radius: var(--form-radius, #{$form-radius}) !default;
$input-group-bg: var(--form-bg, #{$form-bg}) !default;
$input-group-color: var(--form-color, #{$form-color}) !default;
$input-group-focus-color: $form-focus-color !default;
$input-group-focus-style: $form-focus-style !default;
$input-group-icon-color: var(--form-stroke, #{$form-border-color}) !default;

Downloads/wk

85

GitHub Stars

50

LAST COMMIT

6mos ago

MAINTAINERS

1

CONTRIBUTORS

3

OPEN ISSUES

4

OPEN PRs

0
VersionTagPublished
1.1.3
latest
2mos ago
No alternatives found
No tutorials found
Add a tutorial

Rate & Review

100
No reviews found
Be the first to rate