textarea
a few lines of text in the input's box. it starts at three lines and grows with its words, and focus draws the same 2 px frame inside it.
bunx --bun shadcn@latest add @mk/textareaexample
no resize handle: the box sizes itself to what you write. the second summary runs past 120 characters, so its edge stays in the error ink until you cut it.
shown in the chapter list, 120 characters at most
a summary takes 120 characters at most. cut 19.
shown in the chapter list, 120 characters at most
a summary takes 120 characters at most. cut 19.
states
the input’s states, line for line: 1 px at rest, 2 px inside while the text has focus, the caret in the same ink, and the error ink when the text is invalid. a disabled box 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