Native Select

A native <select> with a sketch border and hand-drawn chevron — no custom popover.

Roughness1.5Lock seedAnimate

<NativeSelect options={options} defaultValue="draft" roughness={1.5} />

CLI install

npx doodleui-react add native-select

Usage

import { NativeSelect } from "doodleui-react";

<NativeSelect
  defaultValue="draft"
  options={[
    { value: "draft", label: "Draft" },
    { value: "done", label: "Done" },
  ]}
/>

Props

Prop	Type	Default	Notes
options	NativeSelectOption[]	undefined	Optional value/label pairs. Omit to use <option> children.
animate	boolean	true	Draw-in the border on mount. Overrides DoodleUIProvider. Reduced motion disables this unless the provider set forceAnimate.
roughness	number	1.5	How wobbly the stroke is. 0 is almost geometric. 3+ is messy.
seed	number	provider / random	Locks the sketch. Omit to follow SketchSeedProvider (Shuffle) or a mount-time random seed.
sketchColor	string	#1f1d1a	Stroke color. Also tints primary/accent fills where relevant.
className	string	undefined	Passed through to the root element.
style	CSSProperties	undefined	Passed through to the root element.