Fieldbook
Sign in

Inputs

Character budget counter

A compose field with a remaining-characters readout that punches on a spring and warms in color as the budget runs out.

Using Character budget counter

A compose field with a remaining-characters readout that punches on a spring and warms in color as the budget runs out.

Try the live preview with a pointer and keyboard, then check focus visibility and the narrow layout in your own page. Use the plate number or slug when asking your coding agent to fetch this component.

Props: maxLength, warnAt, accent, placeholder, punch

Which frameworks are available?

The catalog lists these versions: react, vue, svelte, astro, html. The live preview on this page runs React.

How do I access the implementation?

The code, framework versions and installation commands are available in the workbench above.

Connect your agent

Nearby

Floating label input
1529Floating label inputInputsA text field whose label rests inside the box and rises to the top edge on focus or once the field has a value, with focused, valid and invalid looks.
Layout toggle switch
2771Layout toggle switchInputsA switch whose knob crosses the track by animating an actual layout change rather than a translate, so the throw stays exact at any track width.
Spring dot radio group
2050Spring dot radio groupInputsA radio group whose selected dot springs in with a small overshoot while the previous dot shrinks away, crossing over instead of snapping.
Auto Grow Textarea
2792Auto Grow TextareaInputsA multi-line text field that grows taller as the person types more, instead of scrolling inside a fixed box.
Bounce drop toggle
2759Bounce drop toggleInputsA tall vertical toggle switch whose ball drops to the bottom with a bouncy settle when switched off and glides back up with a tight spring when switched on.
Checkbox motion lab
1933Checkbox motion labInputsA single oversized checkbox for tuning exactly how firmly it presses and how slowly its checkmark draws in.