Figma UI component

Figma Input Group component

An Input Group component for Figma, used to display additional information or actions alongside an input or textarea. It combines prefixes, suffixes, or icons with a text field to create more contextual and functional inputs.

Usability tip

Use Input Groups to simplify complex inputs like URLs, currency fields, or search bars. Keep prefixes and suffixes short and clear, and avoid overloading the field with too many icons or actions that compete for attention.

Usage

Ideal for forms that require contextual data entry such as email fields with icons, URL prefixes, search inputs with results, or monetary fields showing currency values.

shadcn/ui Components are available in our Base Figma UI Kit.

Female avatar image
Female avatar image
Female avatar image

Join top designers leading the way with Shadcraft

Become an ambassador and get a free kit.

Female avatar image
Female avatar image
Female avatar image

Join top designers leading the way with Shadcraft

Become an ambassador and get a free kit.

Female avatar image
Female avatar image
Female avatar image

Join top designers leading the way with Shadcraft

Become an ambassador and get a free kit.

Stay in the know

Keep updated on all things happening with Shadcraft.

We respect your privacy

Stay in the know

Keep updated on all things happening with Shadcraft.

We respect your privacy

Stay in the know

Keep updated on all things happening with Shadcraft.

We respect your privacy