Input Group — Vanilla

Input with prefix/suffix addons. Ensure Rizzo CSS is loaded.

Input Group

Wrap an input with input-group__wrapper and optional input-group__addon--prefix / input-group__addon--suffix. Use input-group--error or input-group--success on the root for validation states.

Add this component

Run the command below in your project directory. When prompted, select the component(s) you want. The CLI will copy the CSS and component files.

Choose your package manager — click a tab to select, then copy the command.

npm pnpm yarn bun
Live example

HTML

html html 
<div class="input-group">
  <div class="input-group__wrapper">
    <span class="input-group__addon input-group__addon--prefix" aria-hidden="true">$</span>
    <input class="input-group__input" type="text" placeholder="0.00" aria-label="Amount" />
    <span class="input-group__addon input-group__addon--suffix" aria-hidden="true">USD</span>
  </div>
</div>

Other frameworks: Astro · Svelte · Vue · React