Skip to main content

ReferenceManyInput

** Last Built**: September 2, 2025 at 4:19 PM A form input component for managing many-to-many relationships with external data sources. This component allows users to select multiple items from a reference resource and manages the junction table operations automatically.

Features​

  • Many-to-Many Relationships: Handles complex relationships between resources
  • Junction Table Management: Automatically manages the intermediate table
  • Search and Filter: Built-in search functionality for large datasets
  • Bulk Operations: Add/remove multiple items at once
  • Loading States: Shows loading indicators during data fetching
  • Error Handling: Displays error messages for failed operations
  • Accessibility: Full keyboard navigation and screen reader support

Basic Usage​

import { ReferenceManyInput } from '@site/src/components/ui/ReferenceManyInput';
<ReferenceManyInput
  source='categories'
  reference='categories'
  junctionTable='post_categories'
  label='Categories'
  placeholder='Select categories...'
/>;

Live Example​

Props​

| Prop | Type | Default | Description | | ------------------------------- | ------------------------------- | | source | string | - | The form field name | | reference | string | - | The reference resource name | | junctionTable | string | - | The junction table name | | label | string | - | The input label | | placeholder | string | - | Placeholder text | | disabled | boolean | false | Whether the input is disabled | | readOnly | boolean | false | Whether the input is read-only | | required | boolean | false | Whether the field is required | | helperText | string | - | Helper text below the input | | error | string | - | Error message to display | | showError | boolean | true | Whether to show error messages | | className | string | - | Additional CSS classes | | dataProvider | DataProvider | - | Data provider for fetching data | | perPage | number | 1000 | Number of items per page | | sort | Sort | { field: 'id', order: 'ASC' } | Sort configuration | | filter | Filter | {} | Filter configuration |

Data Provider Interface​

The component expects a data provider with the following methods:

getList (reference resource)​

await dataProvider(reference, {
  pagination: { page: 1, perPage: 1000 },
  sort: { field: 'id', order: 'ASC' },
  filter: {},
});

getList (junction table)​

await dataProvider(junctionTable, {
  pagination: { page: 1, perPage: 1000 },
  sort: { field: 'id', order: 'ASC' },
  filter: { post_id: 1 },
});

create (junction table)​

await dataProvider(junctionTable, {
  data: { post_id: 1, category_id: 2 },
});

delete (junction table)​

await dataProvider(junctionTable, {
  id: 1,
});

Advanced Usage​

Custom Filtering​

<ReferenceManyInput
  source='categories'
  reference='categories'
  junctionTable='post_categories'
  filter={{ status: 'active' }}
  sort={{ field: 'name', order: 'ASC' }}
/>

Custom Styling​

<ReferenceManyInput
  source='categories'
  reference='categories'
  junctionTable='post_categories'
  className='custom-reference-input'
  label='Categories'
/>

Error Handling​

<ReferenceManyInput
  source='categories'
  reference='categories'
  junctionTable='post_categories'
  error='Failed to load categories'
  showError={true}
/>

Styling​

The component uses Tailwind CSS classes and can be customized with:

.custom-reference-input {
  /* Custom styles */
}
.custom-reference-input .reference-input-container {
  /* Container styles */
}
.custom-reference-input .reference-input-list {
  /* List styles */
}
.custom-reference-input .reference-input-item {
  /* Item styles */
}

Accessibility​

  • Keyboard Navigation: Full keyboard support for selection
  • Screen Readers: Proper ARIA labels and descriptions
  • Focus Management: Clear focus indicators
  • Error Announcements: Screen reader announcements for errors

Best Practices​

  1. Use Descriptive Labels: Provide clear, descriptive labels
  2. Handle Loading States: Show loading indicators for better UX
  3. Validate Data: Implement proper validation for selected items
  4. Optimize Performance: Use pagination for large datasets
  5. Error Recovery: Provide clear error messages and recovery options