Fieldbook
Sign in

Inputs

Input with affix

A text field fused with a leading icon or short label, like a URL scheme, sharing one bordered shell that focuses as a single control.

Using Input with affix

A text field fused with a leading icon or short label, like a URL scheme, sharing one bordered shell that focuses as a single control.

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: prefixLabel, placeholder, accent, showIcon

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

Addon Input Group
2297Addon Input GroupInputsA text field wrapped in one bordered shell that can carry a leading icon, a trailing button or text, and shares one focus ring across the whole group.
Appointment Range Card
2108Appointment Range CardInputsA card that pairs a single-month date grid with a start-time and end-time field below it, for picking one day plus a time window in one compact block.
Appointment Scheduler Card
2109Appointment Scheduler CardInputsA single date picker framed inside a titled card with a jump to today button in the corner, styled for booking one appointment.
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.
Autosize text field
2805Autosize text fieldInputsA multi-line text input that grows taller as the person types, up to a generous limit, with an accent focus ring and a disabled state.
Avatar profile picker
2757Avatar profile pickerInputsA profile setup card: an avatar stage whose glow ring recolors per selection, a thumbnail strip to switch avatars, and a validated username field.