input group
an input with company inside its box: an icon, a prefix, a count or a button. the box is the field, so it draws the one focus frame.
bunx --bun shadcn@latest add @mk/input-groupexample
addons sit inside the edge, before or after the text, or under it for a textarea. a button in the box is a control of its own: tab onto clear and it takes its own ring while the field drops back to 1 px.
clear is a control in the field: it takes its own ring, and the field stays at 1 px
the name after the namespace
shown on the changelog page
clear is a control in the field: it takes its own ring, and the field stays at 1 px
the name after the namespace
shown on the changelog page
states
the same frame as a bare input, drawn by the box whenever its text has focus: 1 px at rest, 2 px inside on focus, in the error ink when the text is invalid. disabled screens the edge back and dims the addons with it.
rest
1 px input edge
focus
2 px house edge, inside
typing
same edge, caret in its ink
invalid
1 px error edge
invalid, focus
2 px error edge, inside
invalid, typing
same edge, caret in its ink
disabled
flat fill, screened edge
rest
1 px input edge
focus
2 px house edge, inside
typing
same edge, caret in its ink
invalid
1 px error edge
invalid, focus
2 px error edge, inside
invalid, typing
same edge, caret in its ink
disabled
flat fill, screened edge
screened back: there, but not available now