Input Group
Free · MITHeadless, accessible, and styled entirely through the attribute surface below — bring your own CSS system, or start from the reference theme.
Install
Without a flag you get no styling at all — plain HTML carrying the attribute surface below. --theme copies the same theme in two dialects;--bridge lumos re-points either one onto Lumos for Astro's tokens (it needs a theme to re-point, and Lumos itself, already in your project).
Unstyled — behavior only, you write the CSS
npx astrocraft-ui add forms/input-groupPlain-CSS theme — no build step
npx astrocraft-ui add forms/input-group --theme cssTailwind theme — needs Tailwind v4
npx astrocraft-ui add forms/input-group --theme tailwindPlain-CSS theme, re-pointed onto Lumos tokens
npx astrocraft-ui add forms/input-group --theme css --bridge lumosTailwind theme, re-pointed onto Lumos tokens
npx astrocraft-ui add forms/input-group --theme tailwind --bridge lumosLive demo
InputGroup & SearchField
An addon takes up width; an element sits on top of the field. The search field’s clear button appears once there is something to clear, and Escape empties it without leaving it.
Attribute surface
With no class-merging machinery, these attributes are the whole extension point. State is a data-attribute or a native attribute; visibility is the hiddenattribute. Generated from source by pnpm slots.
| Component | Slots | Variants | Runtime state | Native state |
|---|---|---|---|---|
| `InputAddon.astro` | `input-addon` | `data-side`: `start` · `end` | — | — |
| `InputElement.astro` | `input-element` | `data-side`: `start` · `end` | — | — |
| `InputGroup.astro` | `input-group` | `data-size`: `sm` · `md` · `lg` | — | — |
Source
What the command copies — 4 files, alias-free so the copy lands standing alone. This is the whole component, shown without its comments; the files you install keep them, with the reasoning behind every rule.
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"span"> & { side?: "start" | "end" };
const { side = "start", class: className, ...rest } = Astro.props;
---
<span class={className} data-slot="input-addon" data-side={side} {...rest}><slot /></span>
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"span"> & { side?: "start" | "end" };
const { side = "start", class: className, ...rest } = Astro.props;
---
<span class={className} data-slot="input-element" data-side={side} {...rest}><slot /></span>
---
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"div"> & { size?: "sm" | "md" | "lg" };
const { size = "md", class: className, ...rest } = Astro.props;
---
<div class={className} data-slot="input-group" data-size={size} {...rest}>
<slot />
</div>
import InputAddon from "./InputAddon.astro";
import InputElement from "./InputElement.astro";
import InputGroup from "./InputGroup.astro";
export { InputAddon, InputElement, InputGroup };
export default InputGroup;
What you get
The component source, copied into your project by npx astrocraft-ui add forms/input-group — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.