Input
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/inputPlain-CSS theme — no build step
npx astrocraft-ui add forms/input --theme cssTailwind theme — needs Tailwind v4
npx astrocraft-ui add forms/input --theme tailwindPlain-CSS theme, re-pointed onto Lumos tokens
npx astrocraft-ui add forms/input --theme css --bridge lumosTailwind theme, re-pointed onto Lumos tokens
npx astrocraft-ui add forms/input --theme tailwind --bridge lumosLive demo
Input & Label
Please enter a valid email address.
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 |
|---|---|---|---|---|
| `Input.astro` | `input` | `data-size`: `sm` · `md` · `lg` `data-state`: `default` · `error` · `success` | — | — |
Source
What the command copies — 2 files, alias-free so the copy lands standing alone. This is the whole component; there is nothing else.
---
// src/components/ui/forms/input/Input.astro — headless primitive (see ../../README.md).
// Native <input> with `size` and a validation `state`, both exposed as data attributes. The three
// field primitives (Input, Textarea, Select) and the two composed ones (ComboBox, AdvancedSelect)
// carry the SAME `data-size` / `data-state` surface, so one theme rule set styles all of them —
// that shared surface replaces the deleted `_field.ts` class config.
import type { HTMLAttributes } from "astro/types";
type Props = HTMLAttributes<"input"> & {
size?: "sm" | "md" | "lg";
state?: "default" | "error" | "success";
};
const { size = "md", state = "default", class: className, ...rest } = Astro.props;
---
<input class={className} data-slot="input" data-size={size} data-state={state} {...rest} />
import Input from "./Input.astro";
export { Input };
export default Input;
What you get
The component source, copied into your project by npx astrocraft-ui add forms/input — no package dependency, no CSS to fight. Whatever the paid blocks compose, this is it.