Resource Selector

Resource selection dropdown

SaaSResource

Overview

ResourceSelector provides a dropdown-style selector for picking a resource from a list. It includes built-in search filtering, status badges per option, status-based filtering, clear selection, and keyboard navigation (Escape to close, click outside to dismiss). Supports both controlled and uncontrolled value modes.

Usage

import { ResourceSelector } from "@leanicon/web-builder-library/saas";

<ResourceSelector
  resources={[
    {
      id: "room-1",
      name: "Conference Room A",
      type: "meeting-room",
      status: "active",
      capacity: { min: 1, max: 10, unit: "people" },
    },
    {
      id: "room-2",
      name: "Conference Room B",
      type: "meeting-room",
      status: "active",
      capacity: { min: 1, max: 6, unit: "people" },
    },
    { id: "equip-1", name: "Projector HP-2000", type: "equipment", status: "maintenance" },
  ]}
  onChange={(id, resource) => console.log("Selected:", id, resource)}
/>;

Variants

Default

Default (Dark)

With Pre-selected Value

With Status Filter (Active Only)

Disabled

Loading

Custom Placeholder

Props

Name	Type	Default	Required	Description
`resources`	`(ResourceSummary \| ResourceData)[]`	—	Yes	Available resources
`value`	`string \| null`	—	No	Currently selected resource ID (controlled)
`defaultValue`	`string \| null`	—	No	Default selected resource ID (uncontrolled)
`disabled`	`boolean`	`false`	No	Whether selector is disabled
`loading`	`boolean`	`false`	No	Whether component is loading
`placeholder`	`string`	—	No	Placeholder text
`statusFilter`	`ResourceStatus[]`	—	No	Filter to only show resources with certain statuses
`labels`	`Record<string, string>`	—	No	Optional label overrides
`className`	`string`	—	No	Custom class name
`onChange`	`((resourceId: string \| null, resource: ResourceSummary \| ResourceData \| null) => void)`	—	No	Called when selection changes