AI Dropdown

A flexible and accessible dropdown component that provides a customizable interface for selecting options from a list. The AI Dropdown supports various appearances, custom rendering, and integrates seamlessly with ActiveCampaign’s design system.

Overview

Resources

Install


yarn add @camp/ai-dropdown

Variations

Appearances

The available appearances are default, inline, and floating.


import { AiDropdown, DropdownMenuItem } from '@camp/ai-dropdown';
 
type OptionType = { label: string; invalid?: boolean; id: string };
 
const options = [
  { value: 'option1', label: 'Option 1', id: '1' },
  { value: 'option2', label: 'Option 2', id: '2' },
  { value: 'option3', label: 'Option 3', id: '3' },
];
 
const MyDropdown = () => (
  const [value, setValue] = useState<OptionType | undefined>(null);
 
  return (
    <AiDropdown
      appearance="default" // default, inline, or floating
      options={options}
      value={value}
      onSelect={setValue}
      getLabel={(option) => option.label}
      render={(option, args) => (
        <DropdownMenuItem id={option.id} invalid={option.invalid}>
          {option.label}
        </DropdownMenuItem>
      )}
      placeholder="Select an option"
    />
  );
);

Custom trigger rendering

Customize the trigger button appearance and behavior to match your specific design requirements.


import { AiDropdown, DropdownMenuItem } from '@camp/ai-dropdown';
 
type OptionType = { label: string; invalid?: boolean; id: string };
 
const options = [
  { value: 'option1', label: 'Option 1', id: '1' },
  { value: 'option2', label: 'Option 2', id: '2' },
  { value: 'option3', label: 'Option 3', id: '3' },
];
 
const MyTrigger = (props) => (
  <button {...props}>My custom trigger</button>
)
 
const MyDropdown = () => (
  const [value, setValue] = useState<OptionType | undefined>(null);
 
  return (
    <AiDropdown
      renderTrigger={MyTrigger}
      appearance="default"
      options={options}
      value={value}
      onSelect={setValue}
      getLabel={(option) => option.label}
      render={(option, args) => (
        <DropdownMenuItem id={option.id} invalid={option.invalid}>
          {option.label}
        </DropdownMenuItem>
      )}
      placeholder="Select an option"
    />
  );
);

Placement

The placement of the dropdown can be controlled with the placement prop. Placement for the dropdown menu (Popper.js placement string) defaults to ‘bottom-start’.


import { AiDropdown } from '@camp/ai-dropdown';
 
<AiDropdown {...props} placement="top-end" />;

Disabled

The dropdown can be disabled with the disabled prop.


import { AiDropdown } from '@camp/ai-dropdown';
 
<AiDropdown {...props} disabled={true} />;

Set the menu to the width of the trigger button with the fullWidthMenu prop.


import { AiDropdown } from '@camp/ai-dropdown';
 
<AiDropdown {...props} fullWidthMenu={true} />;

Invalid options

Options can be rendered as invalid by passing the invalid prop to the corresponding DropdownMenuItem.


import { AiDropdown, DropdownMenuItem } from '@camp/ai-dropdown';
 
<AiDropdown
  {...props}
  render={(option, args) => (
    <DropdownMenuItem id={option.id} invalid={option.invalid}>
      {option.label}
    </DropdownMenuItem>
  )}
/>;

Accessibility

Keyboard support

Tab: Navigate to and from the dropdown trigger
Space/Enter: Open the dropdown menu when focused on the trigger
Arrow keys: Navigate through options when the menu is open
Enter: Select the currently focused option
Escape: Close the dropdown menu

The AI Dropdown component follows ARIA best practices and provides proper screen reader support with appropriate aria-expanded, aria-haspopup, and aria-controls attributes.