RichSelect

RichSelect -- Custom select with full control over option and value rendering

Default

Usage

import { RichSelect } from '@tryvienna/ui'

<div className="w-64">
  <RichSelect value={value} onValueChange={setValue} options={FRUIT_OPTIONS} />
</div>

Examples

Default

Default

<div className="w-64">
  <RichSelect value={value} onValueChange={setValue} options={FRUIT_OPTIONS} />
</div>

Custom Rendering

Custom Rendering

<div className="w-64">
  <RichSelect
    value={value}
    onValueChange={setValue}
    options={STATUS_OPTIONS}
    renderValue={(opt) => (
      <span className="flex items-center gap-2">
        <span
          className="size-2 rounded-full shrink-0"
          style={{ backgroundColor: opt.color as string }}
        />
        <span className="font-medium">{opt.label}</span>
      </span>
    )}
    renderOption={(opt) => (
      <span className="flex items-center gap-2">
        <span
          className="size-2 rounded-full shrink-0"
          style={{ backgroundColor: opt.color as string }}
        />
        <span className="flex flex-col">
          <span className="font-medium leading-tight">{opt.label}</span>
          <span className="text-xs text-muted-foreground leading-tight mt-1">
            {opt.description as string}
          </span>
        </span>
      </span>
    )}
  />
</div>

Small

Small

<div className="w-48">
  <RichSelect value={value} onValueChange={setValue} options={FRUIT_OPTIONS} size="sm" />
</div>

Disabled

Disabled

<div className="w-64">
  <RichSelect value="apple" onValueChange={() => {}} options={FRUIT_OPTIONS} disabled />
</div>

API Reference

RichSelect

Prop	Type	Default	Description
value	string	-	Currently selected value
onValueChange	(value: string) => void	-	Callback when value changes
options	T[]	-	Array of options
renderOption	(option: T, state: { selected: boolean; focused: boolean }) => React.ReactNode	-	Custom renderer for each option in the dropdown
renderValue	(option: T) => React.ReactNode	-	Custom renderer for the selected value in the trigger
placeholder	string	-	Placeholder when no value selected
disabled	boolean	-	Disabled state
side	'top' | 'bottom'	-	Dropdown direction
size	'sm' | 'default'	-	Trigger size variant

Data Attributes

Component	data-slot
RichSelect	"rich-select"