Fylgja Input Group
The Fylgja Input Group component allows you to group inputs and buttons together to create more intuitive form controls.
This component is ideal for building various UI elements such as search bars, button groups, or rating systems using radio buttons.
Installation
npm install @fylgja/input-grouppnpm add @fylgja/input-group<link href="https://cdn.jsdelivr.net/npm/@fylgja/input-group/index.min.css" rel="stylesheet">Usage
Once installed, you can import the full package with:
@import "@fylgja/input-group";Alternatively, if you only need specific parts, you can import them individually:
| Import Path | Description |
|---|---|
@fylgja/input-group/base |
Contains to core of the Input Group |
@fylgja/input-group/merge |
Contains the --merge modifier class |
@fylgja/input-group/steps |
Contains the --steps modifier class |
Modifiers
--merge
The --merge modifier merges all borders between elements in an input group, making them appear as a unified component.
--steps
The --steps modifier adds stepping functionality, mainly used with radio buttons or checkbox groups to create a range-like input.
Examples
Ready made examples built on this component live in the Fylgja UI gallery:
- Search Box, a query field joined to its submit button
- Button Group, a row of buttons acting as one control
- Review Stars, a star rating built on the
--stepsmodifier
FAQ
What's the difference between merge and the default input-group?
By default, input-group just groups elements together. The merge modifier additionally collapses the borders between them so the group reads as one unified control, as in the Button Group and Search box examples.
Can steps modifier be used with something other than radio buttons or checkboxes?
The documented use case is radio buttons or checkboxes to build a range-like or star-rating input, as shown in the "Start Rating" example. It isn't documented for other input types.
Do I need custom JavaScript to make the star rating example work?
No, the rating example relies purely on native radio button behavior and CSS (via the steps modifier and a shared name attribute). No JavaScript is required for the visual state shown.
Can I mix a text input and multiple buttons in the same input group?
Yes, input-group doesn't restrict which elements you combine. The Search box example pairs a single input with one button, and you can extend that pattern with more inputs or buttons as needed.