Skip to content
ConversionIQ Docs

Component: Channel Selector

Component

Section titled “Component”

Purpose / responsibility

Section titled “Purpose / responsibility”

Allow selection of channel types/connectors for a workspace, with clear availability and plan/permission gating.

Composition:

Props / inputs / outputs

Section titled “Props / inputs / outputs”
  • Inputs:
    • available connector list (with metadata)
    • selected channel types
    • gating info (plan/permission)
  • Outputs:
    • onChange(selected)
    • onConnect(type) (optional)

Variants

Section titled “Variants”
  • Selection-only
  • Selection + connect CTA
  • Dropdown single-select (button that opens a list to pick one channel): implemented in the app as ChannelSelect (src/components/ui/channel-select.tsx). Use for filters, forms, or any “select one channel” UI. Built with Popover + Button + option list; supports value, onValueChange, placeholder, disabled, optional showIcons.

States

Section titled “States”
  • Default: selectable list
  • Loading: connector catalog loading
  • Empty: no connectors available (contract restriction)
  • Error: catalog unavailable
  • Disabled: lacks channels.configure

Accessibility requirements

Section titled “Accessibility requirements”
  • Checkbox/radio semantics
  • Keyboard navigable list
  • Announce disabled reasons (tooltip text + aria-describedby)

Security & privacy considerations (if applicable)

Section titled “Security & privacy considerations (if applicable)”
  • Do not embed secrets; connector metadata only

Analytics hooks (if applicable)

Section titled “Analytics hooks (if applicable)”
  • get_started.channels.selected

Dependencies

Section titled “Dependencies”