Recipes

Recipe: Input group + prefix/suffix design

Build accessible input groups with integrated prefixes, suffixes, and contextual adornments that scale across all states.

Prefix variant

nimbus.io/

Suffix variant

.com

Dual adornment

$USD

Disabled state

https://

Error state

@

Please enter a valid email address.

Usage notes

  • •Use focus-within on the wrapper to style the entire group when the input is focused.
  • •Adornments are non-interactive <span> elements — do not use buttons or links inside the group border.
  • •Match adornment background to a slightly elevated surface tone so it reads as attached but distinct.
  • •Error states use a red border with a subtle red tint on the adornment background to maintain the group relationship.
← Back to docsAll recipes →