Input Group

Addons are visual elements attached to the start (prefix) or end (suffix) of an input. Common examples include currency symbols ($, €), domain prefixes (https://), units (kg, cm), or action buttons (search icon, clear button).

Use Input Groups when inputs need context or actions directly attached. Perfect for prices ($), percentages (%), URLs (https://), email domains (@company.com), measurements (5 kg), or search with submit button.

Yes! Buttons work great as suffixes for actions like search submission, password visibility toggle, or copy-to-clipboard. Ensure buttons have clear icons or labels and don't confuse users about the input's purpose.

Text and icon addons are typically non-interactive decoration, but button addons are clickable. If you need interactive prefixes (like country code selectors), use a select dropdown or combobox instead of static text.

When properly implemented, Input Groups maintain full accessibility. Addons should not interfere with label association, and any interactive addons must be keyboard accessible with appropriate ARIA labels for screen readers.

Yes, this Figma Input Group component matches the shadcn/ui implementation, ensuring your enhanced inputs look and function consistently from design to production code.