Text input
Input
Inline is the default and it draws nothing in any state, not even on focus. A placeholder, an optional leading glyph, and the field's position in the layout are the whole affordance. That restraint is what lets an input sit directly in a row of content and create an object where it stands, instead of announcing itself as a form.
npx shadcn@latest add @minflow/inputWhere to use it
- Inline editing, draft rows, and any field that lives inside content rather than inside a form.
- Object titles, where the heading variant carries the display face.
- The bounded variant only in genuinely dense forms that need a visible target.
Variations
Inline
The default. No fill, no box, no rule. Use it everywhere unless you have a specific reason not to.
Leading glyph and revealing action
When the field needs a category marker in front, or a commit control that should stay hidden until there is something to commit.
Muted
Optional slots waiting to be filled in later: 'Add a description', 'Set target date'. The placeholder is itself the click-to-edit affordance.
Heading
The object-title field at the top of a detail view. Takes the display face so the title reads as a title while still being editable in place.
Bounded
The one bounded variant. A hairline all around and still no fill, for dense forms where the user needs to see the target.