Basic Usage

El component CarriersFilter permet seleccionar fins a 5 aerolínies amb cerca en temps real. Inclou opcions de filtrat: Preferred (preferides), Exclude (excloure), Only (només aquestes), i All (totes).

Airlines (Add up to 5 airlines)

{
  "carriers": [],
  "carrierModifier": "Preferred",
  "count": 0
}

With Default Values

Exemple amb aerolínies pre-seleccionades i modificador configurat.

Preferred Airlines (Max 3)

{
  "carriers": [
    "IB",
    "LH",
    "BA"
  ],
  "modifier": "Only",
  "count": 3
}

Compact Version

Versió compacta sense títol personalitzat per integració en altres components.

Airlines to exclude

Filter Options Explained

Explicació de les diferents opcions de filtrat disponibles:

Opcions de filtrat:

Preferred: Les aerolínies seleccionades seran prioritzades en els resultats
Exclude: Les aerolínies seleccionades seran excloses dels resultats
Only: Només es mostraran vols de les aerolínies seleccionades
All: Es mostraran totes les aerolínies sense filtrar

API Reference


interface CarriersFilterProps {
  carriers?: string[];
  carrierModifier?: 'Preferred' | 'Exclude' | 'Only' | 'All';
  maxCarriers?: number;
  title?: string;
  placeholder?: string;
  dataTestId?: string;
  onGetData?: (filter: string) => Carrier[];
  onCarriersChanged?: (carriers: string[]) => void;
  onCarrierModifierChanged?: (modifier: 'Preferred' | 'Exclude' | 'Only' | 'All') => void;
  className?: string;
}

interface Carrier {
  code: string;
  name: string;
}

// Features:
- ✅ Cerca en temps real
- ✅ Selecció múltiple amb límit configurable
- ✅ Eliminació individual i massiva
- ✅ Filtres: Preferred, Exclude, Only, All
- ✅ Suport tema fosc/clar
- ✅ Accessibilitat completa (ARIA)
- ✅ Responsive design
- ✅ Compatibilitat legacy