blackchalkv0.3.0
Components

Search Bar

SketchSearchBar — a hand-drawn search input for ecommerce and filter interfaces.

SketchSearchBar renders a rough.js-styled search input that fills the width of its container — wrap it to control its size.

Default

import { SketchSearchBar } from "blackchalk";<div style={{ width: 360, maxWidth: "100%" }}><SketchSearchBar placeholder="Search products..." /></div>

Props

PropTypeDefault
valuestring
placeholderstring"Search..."
onChange(value: string) => void

See it in the Storybook playground, or read the source.

On this page