> Autocomplete

Autocomplete

Champ de saisie avec autocomplétion. Supporte multi-sélection, groupes, création d'options.

TagsuiExemples5StylesDisponibles

Default

Sélection multiple

Rechercher...

export const Default = () => {
  const [values, setValues] = useState<AutocompleteOption[]>([]);
  return (
    <Box minH={300}>
      <Autocomplete
        label="Sélection multiple"
        placeholder="Rechercher..."
        options={BASE_OPTIONS}
        value={values}
        onChange={setValues}
      />
    </Box>
  );
};

SingleValue

Sélection unique

Choisir...

export const SingleValue = () => {
  const [values, setValues] = useState<AutocompleteOption[]>([]);
  return (
    <Box minH={300}>
      <Autocomplete
        label="Sélection unique"
        placeholder="Choisir..."
        isMulti={false}
        autoFocus={false}
        options={BASE_OPTIONS}
        value={values}
        onChange={setValues}
      />
    </Box>
  );
};

WithSearch

Recherche dynamique

Saisir pour chercher...

export const WithSearch = () => {
  const [values, setValues] = useState<AutocompleteOption[]>([]);
  const [options, setOptions] = useState<AutocompleteOption[]>([]);
  const onSearchChange: AutocompleteProps['onSearchChange'] = search => {
    setOptions(
      search
        ? [
            { value: `${search}-1`, label: `${search} — résultat 1` },
            { value: `${search}-2`, label: `${search} — résultat 2` },
          ]
        : [],
    );
  };
  return (
    <Box minH={300}>
      <Autocomplete
        label="Recherche dynamique"
        placeholder="Saisir pour chercher..."
        options={options}
        value={values}
        onChange={setValues}
        onSearchChange={onSearchChange}
        disabledFilterSearch
      />
    </Box>
  );
};

WithGroups

Avec groupes

Choisir...

export const WithGroups = () => {
  const [values, setValues] = React.useState<AutocompleteOptionWithGroup[]>([]);
  const options: AutocompleteOptionWithGroup[] = [
    { value: 'brief-collectif', label: 'Brief collectif', group: 'Coaching' },
    { value: 'brief-individuel', label: 'Brief individuel', group: 'Coaching' },
    { value: 'formation-module', label: 'Formation module', group: 'Formation' },
    { value: 'formation-externe', label: 'Formation externe', group: 'Formation' },
  ];
  return (
    <Box minH={300}>
      <Autocomplete
        label="Avec groupes"
        placeholder="Choisir..."
        options={options}
        value={values}
        onChange={v => setValues(v as AutocompleteOptionWithGroup[])}
      />
    </Box>
  );
};

AllowCreate

Avec création

Rechercher ou créer...

export const AllowCreate = () => {
  const [values, setValues] = useState<AutocompleteOption[]>([]);
  return (
    <Box minH={300}>
      <Autocomplete
        label="Avec création"
        placeholder="Rechercher ou créer..."
        allowCreate
        options={BASE_OPTIONS}
        value={values}
        onChange={setValues}
      />
    </Box>
  );
};

Alveole UI Kit — v1.8.4