search

InfoCardGroupInput

A form input component for selecting multiple items with InfoCard-style presentation. Similar to MultiSelect but displays selected items as stacked profile images.

hashtag
Installation

import { InfoCardGroupInput } from 'uxp/components';

hashtag
Signature

const InfoCardGroupInput: React.FunctionComponent<InfoCardGroupInputProps>

hashtag
Examples

Basic usage with static options:

const [selectedTeams, setSelectedTeams] = useState<string[]>([]);

<InfoCardGroupInput options={[ { name: 'Team A', id: 'team-a' }, { name: 'Team B', id: 'team-b' } ]} selected={selectedTeams} onChange={(values) => setSelectedTeams(values)} labelField="name" valueField="id" />


```tsx
With custom field mappings:

<InfoCardGroupInput options={users} selected={selectedUserIds} onChange={setSelectedUserIds} labelField="fullName" valueField="userId" fields={{ image: 'avatar', name: 'fullName', title: 'fullName', subtitle: 'email' }} />


```tsx
In DynamicForm:

{ name: 'teamMembers', label: 'Team Members', type: 'json', renderField: (data, onValueChange) => ( <InfoCardGroupInput options={availableUsers} selected={data.teamMembers || []} onChange={onValueChange} labelField="name" valueField="id" /> ) }

PreviousInfoCardGroupNextInput

Last updated