Documentation
Fields

Input

`Input`, `Textarea` and `Numeric`: one input with no box of its own. The border, focus ring and invalid state come from the row around it.

npx shadcn@latest add @fragiola/input
Input
Gallery

The one-input claim

The baseline offered three ways to write a field and two different input components — Input (with its own border) and InputGroupInput (borderless, because the group would double the border). Fragiola has one input, used bare, in a group with addons, and with an inset icon — no second component anywhere.

None of Input, Textarea and Numeric carry a border, background, height, radius, focus ring, invalid state or theme. The box comes from the row around them.

Numeric — the thesis test

Numeric is a control written from scratch. It contains no box styling of any kind — no border, background, height, focus ring, invalid state or theme. If writing it required one line of box styling, the rule would be wrong. It does not.

Input.Template.Simple

A composition template with at most seven of its own props, no appearance props, and no props bag. It obeys three rules: no style of its own, no appearance props, one className going to the main piece (the palette channel).