PaceUI

Intro
Agents
Crafts
Charts
Motion
PreviousNext

Expanding Search

An animated pill-shaped search input that smoothly expands on focus and input, revealing an instant clear button and spring search action.

When to use

  • Header search bars, filter toolbars, and global navigation command inputs.
  • Surfacing an intentional submit action button only when search text has been entered.
  • Providing snappy typing physics with directional spring compensation.

When not to use

  • Multi-line comment boxes or paragraph composition areas.
  • Complex filtered query builders with multiple tokenized parameters.

API Reference

ExpandingSearchProps

PropTypeDefaultDescription
valuestring—Controlled input search value.
defaultValuestring""Initial default search value.
placeholderstring"Search anything..."Placeholder text shown when input is empty.
onChange(value: string) => void—Callback fired whenever the text value changes.
onSubmit(value: string) => void—Callback fired when the form or submit button is triggered.
onClear() => void—Callback fired when the clear button is clicked.
classNamestring—Additional CSS class names.

Motion

  • Wrapped in LayoutGroup to prevent layout jumping when sibling controls mount and unmount.
  • Submit button slides in with spring transition (stiffness: 420, damping: 28, mass: 0.8).
  • Submit arrow icon rotates from -45° to 0° upon activation.