Input Group
Input with optional prefix and suffix addons. Uses Rizzo BEM and design tokens.
Input Group
An Input Group wraps a text input with optional prefix and/or suffix addons (e.g. currency symbol, icon, domain suffix). All parts share one border and focus ring for a single-field look. Uses the same design tokens as other form components.
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 Props
prefix(slot or ReactNode) – Content before the input (e.g.$, icon)suffix(slot or ReactNode) – Content after the input (e.g..com,USD)- Standard input props:
id,name,type,placeholder,value,required,disabled,readonly,autocomplete error(boolean) – Error state (border and focus use--error)success(boolean) – Success state (border and focus use--success)
Examples
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
BEM classes
input-group, input-group__wrapper, input-group__addon, input-group__addon--prefix, input-group__addon--suffix, input-group__input. Modifier: input-group--error, input-group--success.