Search Capsule React Component

LIVE PREVIEWInteract with the component

Just React. No extra dependencies.

Copy the component and its CSS module into your project.

CSS Modules

Usage

Matches your current playground settings.

import SearchCapsule from "./SearchCapsule";

export default function Example() {
  return (
    <SearchCapsule
      placeholder={"Find something good"}
      label={"Search the collection"}
      clearLabel={"Clear search"}
      submitLabel={"Submit search"}
      defaultValue={""}
      color={"#b5bfcd"}
      disabled={false}
      name={"q"}
    />
  );
}

Using Search Capsule

Connect onSearch to your search action and onValueChange to live results if needed. The component prevents native navigation, leaving result handling to your application.

This component renders its own search form, so place it outside other forms. The clear button restores focus to the input and the capsule remains within its container.

Props

Name	Type	Required	Default	Description
value	string	No	undefined	Controlled search query.
defaultValue	string	No	""	Initial uncontrolled query.
onValueChange	function	No	undefined	Receives the query as it changes.
onSearch	function	No	undefined	Receives the current query on submit.
placeholder	string	No	"Search"	Input placeholder.
label	string	No	"Search"	Accessible form and input label.
clearLabel	string	No	"Clear search"	Clear button label.
submitLabel	string	No	"Submit search"	Submit button label.
color	string	No	"#b5bfcd"	Focus border and icon colour.
disabled	boolean	No	false	Disable input and buttons.
name	string	No	"q"	Native input field name.
className	string	No	""	Additional classes on the root element.
style	CSSProperties	No	undefined	Inline styles for sizing, typography and appearance.

Related components

Password Input

Inputs

A recessed password field pairs a reveal control with an optional strength indicator.

Tag Composer

Inputs

Editable tags collect inside a softly framed input with individual remove controls.

Constellation Rating

Inputs

Faceted stars lift into selection with a small marker beneath the chosen rating.

Toggle Board

Inputs

A bank of tactile keys holds independent selections with illuminated indicators.

Category: Inputs

Inputs React Animation