Components
Combobox
SketchCombobox — a searchable select with a hand-drawn dropdown panel.
SketchCombobox combines a text field with a filtered option list: as you type,
the dropdown narrows to matching entries. The panel animates in with a sketchy
spring and is drawn with SketchCard to match the rest of the library.
Default
import { useState } from "react";import { SketchCombobox } from "blackchalk";const options = [{ label: "Apple", value: "apple" },{ label: "Apricot", value: "apricot" },{ label: "Banana", value: "banana" },{ label: "Blackberry", value: "blackberry" },{ label: "Cherry", value: "cherry" },{ label: "Grapefruit", value: "grapefruit" },];export default function Demo() {const [v, setV] = useState("");return ( <div style={{ width: 280 }}> <SketchCombobox options={options} value={v} onChange={setV} placeholder="Search fruit…" /> </div>);}Props
| Prop | Type | Default |
|---|---|---|
options | { label: string; value: string }[] | — |
value | string | — |
onChange | (value: string) => void | — |
placeholder | string | "Search…" |
style | CSSProperties | — |
See it in the Storybook playground, or read the source.