select
a field that opens a list. the trigger is the box, so focus draws its 2 px frame inside it, and the list floats over the page on a raised layer.
bunx --bun shadcn@latest add @mk/selectexample
pick with the pointer, or focus the trigger and use the arrow keys, or type a ship’s first letters. the second select has no ship yet, so it holds the error ink until you pick one.
the ship this run belongs to
pick the ship this run belongs to.
the ship this run belongs to
pick the ship this run belongs to.
open
the list, printed open: the row under the pointer takes the raised hover fill, and the chosen ship is boxed in the house ink with a tick. in light its lift prints as a screen where the list meets the page; in dark it stays soft.
draws where a floating layer meets the page, under its soft lift
states
the trigger draws the input’s frame: 1 px at rest and 2 px inside on focus, by tab or by click, in the error ink while nothing is picked. a disabled trigger keeps a flat fill and its full edge.
rest
1 px input edge
focus
2 px house edge, inside
invalid
1 px error edge
invalid, focus
2 px error edge, inside
disabled
flat fill, full edge
rest
1 px input edge
focus
2 px house edge, inside
invalid
1 px error edge
invalid, focus
2 px error edge, inside
disabled
flat fill, full edge