Z

InputGroup

Text input with leading/trailing icons, prefix or suffix for enhanced context and usability.

Narrative Section Stable

With Icons

Add visual context with leading or trailing icons.

With Prefix

Add fixed text before the input for context like currency or protocols.

https://
+1
$

With Suffix

Add fixed text after the input for units or context.

km
kg
%

Error States

InputGroup adapts styling for error states.

https://
km

Success States

Show positive feedback with success styling.

https://

Disabled State

Disabled inputs with appropriate visual feedback.

$

Props

Prop Type Default Description
name string required Input name attribute
value mixed null Input value
type string 'text' Input type
placeholder string '' Placeholder text
iconLeft string null Leading icon name
iconRight string null Trailing icon name
prefix string null Fixed prefix text (e.g. '+', 'https://')
suffix string null Fixed suffix text (e.g. 'km', '%')
state string 'default' default, error, success, disabled
class string '' Additional CSS classes

Usage Guidelines

When to Use Icons

  • Use search icon for search inputs
  • Use location icon for address/location fields
  • Use check icon to indicate validated/verified input
  • Icons should clarify purpose, not decorate

When to Use Prefix/Suffix

  • Use prefix for protocols (https://), country codes (+1)
  • Use suffix for units (km, kg, %), currency symbols
  • Keep prefix/suffix text short (1-3 characters ideal)
  • Don't use both icon and prefix/suffix on same side

Accessibility

  • Icons are decorative - ensure input has proper label
  • Prefix/suffix text is visible to screen readers
  • State changes are communicated through color and icon
  • All interactive elements maintain 48px touch targets

Code Example

<x-narrative-sections.input-group
    name="search"
    placeholder="Search locations..."
    iconLeft="search"
    state="default"
/>

<x-narrative-sections.input-group
    name="website"
    placeholder="example.com"
    prefix="https://"
/>

<x-narrative-sections.input-group
    name="distance"
    type="number"
    placeholder="0"
    suffix="km"
/>