Components
Select
SketchSelect — a hand-drawn dropdown select with a rough.js trigger and animated panel.
SketchSelect renders a rough.js bordered trigger that opens an animated dropdown
panel — a sketchy alternative to a native <select>. Pass options and an optional
selected value; wire onChange to make it controlled.
Default
import { SketchSelect } from "blackchalk";const options = [{ value: "apple", label: "Apple" },{ value: "banana", label: "Banana" },{ value: "cherry", label: "Cherry" },{ value: "date", label: "Date" },];<div style={{ width: 240 }}><SketchSelect options={options} selected="apple" /></div>Disabled
<div style={{ width: 240 }}><SketchSelect options={options} selected="banana" disabled /></div>Props
| Prop | Type | Default |
|---|---|---|
options | { value: string; label: string }[] | — |
selected | string | — |
onChange | (value: string) => void | — |
disabled | boolean | — |
className | string | — |
style | CSSProperties | — |
See it in the Storybook playground, or read the source.