input
one line of text in a box with a 1 px edge. focus thickens that edge to 2 px inside the box, so the text never moves.
bunx --bun shadcn@latest add @mk/inputexample
the label sits above the box and the hint below it. mark a field aria-invalid and its edge, its focus and its caret take the error ink. the slugs check themselves as you type.
shown in the running head
lowercase letters, digits and dashes
a slug takes lowercase letters, digits and dashes. try one-photon.
shown in the running head
lowercase letters, digits and dashes
a slug takes lowercase letters, digits and dashes. try one-photon.
states
one frame in every state: 1 px at rest, and 2 px in the house ink while the text has focus, with the caret in the same ink. an invalid field swaps the house ink for the error ink. a disabled field skips the tab order, keeps a flat fill and screens its edge back.
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