Components
Select
A hand-drawn select dropdown with a rough chevron indicator.
Choose one...
Installation
package manager
npx shadcn add https://bydefaulthuman.fun/r/select.jsonProps
PropTypeDefaultDescription
classNamestring—
Additional Tailwind classes applied to the component.
defaultValuestring—
Initial uncontrolled value.
disabledboolean—
Disables interaction.
errorstring—
Error message shown below the component.
idstring—
Optional stable id used for sketch seeding and accessibility.
labelstring—
Optional label text shown with the component.
onBlur() => void—
Optional callback for component events.
onChange(value: string) => void—
Callback fired when the value changes.
onFocus() => void—
Optional callback for component events.
options*SelectOption[]—
Options rendered by the component.
placeholderstring—
Placeholder text shown before a value is entered or selected.
themeCrumbleTheme—
Overrides the global Crumble theme for this instance.
valuestring—
Controlled value for the component.
Error state
Select a country
Accessibility
Select uses a button plus listbox pattern, so the trigger should have a clear label or surrounding heading. Keep option labels distinct and short to make keyboard selection easier.
Examples
import { Select } from "@/components/crumble/ui/select";
<Select
label="Framework"
placeholder="Choose one..."
options={[
{ value: "next", label: "Next.js" },
{ value: "remix", label: "Remix" },
{ value: "astro", label: "Astro" },
]}
/>;