DesignSelect

Dropdown select component with Inter font, elevation shadows, and checkmark indicators

Size Variants (Side-by-side Comparison)

Small
28px
size="small"
Default
32px
(no size prop)
Large
40px
size="large"

Basic Select

Minimal usage with placeholder

Props:
{ placeholder: "Select an option..." }

With Default Value

Shows checkmark for selected item

Props:
{ value: "option2", onValueChange: "setValue" }

With Label

Select with label text above

Props:
{ label: "Country", placeholder: "Select country..." }

Disabled State

Non-interactive with 44% opacity

Props:
{ disabled: true, value: "option2" }

Error State

Shows red border and error message

Props:
{ error: true, errorMessage: "Please select an option" }

Custom Dropdown Width

Control dropdown menu width independently

Props:
{ width: 300 }

Long Text Truncation

Options automatically truncate with ellipsis

Props:
{ placeholder: "Long options..." }

Custom Display Value

Use displayValue prop to show different content in the trigger vs dropdown

Country with Flag

Short version in trigger, full name in dropdown

Props:
{ DesignSelectValueCustom: "options={...}" }

Social Platform with Icon

Custom content in both dropdown and trigger

Props:
{ DesignSelectValueCustom: "options={...}" }

With Badge

Badge in both dropdown and trigger

Props:
{ DesignSelectValueCustom: "options={...}" }

Icon + Badge Combined

Rich content with icon and status badge

Props:
{ DesignSelectValueCustom: "options={...}" }