Live component development with hot reload

@fieldflow360/org-ui

Active tab
dropdown

Dropdown

Basic Dropdown

<Dropdown
  label="Country"
  value={country}
  onChange={setCountry}
  options={[
    { value: 'lb', label: 'Lebanon' },
    { value: 'us', label: 'United States' },
  ]}
/>

Country

Use arrow keys and Enter for keyboard navigation

Selected: LB

Search select (input + list)

SearchSelect

<SearchSelect
  label="Country"
  value={country}
  onChange={setCountry}
  searchPlaceholder="Search country..."
  options={COUNTRIES}
/>

Country

Selected: US

Validation and disabled options

Dropdown with error

<Dropdown
  label="Plan"
  placeholder="Choose a plan"
  error="Please select an available plan"
  options={[
    { value: 'free', label: 'Free' },
    { value: 'pro', label: 'Pro', disabled: true },
    { value: 'enterprise', label: 'Enterprise' },
  ]}
/>

Plan

Please select an available plan

Tiny trigger (15px) + fixed menu width

Custom tiny trigger

<Dropdown
  fullWidth={false}
  menuMinWidth={220}
  trigger={() => <button className="h-[15px] w-[15px] rounded-sm bg-zinc-800" />}
  options={actionOptions}
/>

Trigger keeps 15px width; menu width is independent.

Button trigger (table-actions style)

Dropdown with button trigger

<Dropdown
  fullWidth={false}
  trigger={({ isOpen }) => (
    <Button title={isOpen ? 'Close actions' : 'Actions'} />
  )}
  options={actionOptions}
/>

Selected action: edit

Icon trigger (three dots, no chevron)

Icon-only trigger

<Dropdown
  fullWidth={false}
  trigger={() => <Button iconOnly leftIcon={<DotsIcon />} />}
  options={actionOptions}
/>

Open state is reflected by accent trigger fill.