LCD amount input
Type an amount like on a solar calculator: seven-segment digits, cents first and chunky rubber keys underneath.
Settings
Code
<div class="uvq06-lcd"><label for="uvq06-lcd-in" class="lb">Amount</label><div class="cs"><div class="sol" aria-hidden="true"><i></i><i></i><i></i><i></i></div><div class="sc"><input id="uvq06-lcd-in" inputmode="numeric" autocomplete="off" spellcheck="false"><div class="dp" aria-hidden="true"><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i></span><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i></span><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i></span><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i></span><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i></span><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i><i class="p"></i></span><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i></span><span class="dg"><i class="a"></i><i class="b"></i><i class="c"></i><i class="d"></i><i class="e"></i><i class="f"></i><i class="g"></i></span><span class="eu">€</span></div></div><div class="ks"><button type="button" data-k="c">C</button><button type="button" data-k="00">00</button><button type="button" data-k="del" aria-label="Clear">⌫</button></div></div></div>Prompt for AI
Paste it into ChatGPT, Claude or Cursor and it will adapt the block to your project with these settings, even if you don’t use React.
More in Inputs
See all InputsWhere to use it
This amount field borrows the screen of a pocket calculator. Each digit is drawn with seven CSS segments, unlit ones stay faintly visible like real liquid crystal, and the backlight warms up when the field has focus. Digits enter from the right, cents first, the way card terminals work, so nobody has to type a comma.
Tint the crystal and the segments with the two colors to get a green, grey or amber screen. It works well in tip screens, expense apps and point of sale demos, next to a single large confirm button.