Tally UI

CustomerSelect

Customer picker with search and selectable customer cards

Import

import { CustomerSelect } from '@tallyui/components';

Usage

<CustomerSelect
  customers={filteredCustomers}
  selected={selectedCustomer}
  onSelect={setSelectedCustomer}
  onSearch={setSearchQuery}
/>

A customer picker that renders a scrollable list of CustomerCard items. When a customer is selected, their card is highlighted at the top. The parent component owns the filtering logic -- this component simply calls onSearch with the query text and renders the customers array it receives.

Requires a ConnectorProvider ancestor in the component tree.

Props

PropTypeDefaultDescription
customersany[]requiredCustomer documents to display
selectedany---Currently selected customer
onSelect(customer) => voidrequiredCalled when a customer is tapped
onSearch(query: string) => voidrequiredCalled when search text changes
placeholderstring'Search customers...'Search input placeholder
classNamestring---Override container styles

Live demo

On this page