Zum Hauptinhalt springen

Auswählen

Auswählen in Storybook
Note: Es gibt veraltete Versionen dieser Komponente. Wechseln Sie zu einer Version, die älter als 10.0.x ist, um die entsprechende Dokumentation anzuzeigen.

Beispiele​

Im Abschnitt Verwendung finden Sie Informationen darüber, wie und wann Sie Select verwenden können. Auf den speziellen Registerkarten finden Sie Einzelheiten zu den von der Komponente bereitgestellten Funktionen.

Note: Die meisten Funktionen und Eigenschaften der vier Dropdown-Komponenten unterscheiden sich bei der Verwendung nicht. Einige Beispiele aus anderen Komponenten können auch für Select relevant sein.

Mit einem Initialwert​

Beispiel für die Festlegung der einfachen Select-Komponente mit einem zugewiesenen Initialwert.

<Select
  label="Your favorite characters"
  initialValue={{ id: '1', label: 'Anakin' }}>
  <SelectOption
    value={{
      id: '1',
      label: 'Anakin',
    }}
  />
  <SelectOption
    value={{
      id: '2',
      label: 'Luke',
    }}
  />
</Select>

Kein Initialwert​

Einfache Select-Komponente ohne Initialwert.

<Select label="Your favorite characters">
  <SelectOption
    value={{
      id: '1',
      label: 'Anakin',
    }}
  />
  <SelectOption
    value={{
      id: '2',
      label: 'Luke',
    }}
  />
</Select>

Deaktivierte Dropdown-Komponente oder Optionen​

Sie können jede der Dropdown-Komponenten vollständig deaktivieren, indem Sie die Eigenschaft disabled auf true setzen. Mit der Eigenschaft disabled der Komponenten SelectOption und ComboboxOption können Sie auch nur die speziellen Optionen deaktivieren. Wenn die gesamte Komponente deaktiviert ist, hat die Eigenschaft disabled der Optionen keine Auswirkungen.

Deaktivierte Dropdown-Komponente​

Beispiel für eine deaktivierte Dropdown-Komponente unter Verwendung der Select-Komponente.

<Select
  label="Your favorite character"
  initialValue={{ id: '1', label: 'Anakin' }}
  disabled={true}>
  <SelectOption
    value={{
      id: '1',
      label: 'Anakin',
    }}
  />
  <SelectOption
    value={{
      id: '2',
      label: 'Luke',
    }}
  />
</Select>

Deaktivierte Optionen​

Beispiel für die Select-Komponente mit einigen deaktivierten Dropdown-Optionen:

<Select
  label="Your favorite character"
  initialValue={{ id: '2', label: 'Luke' }}>
  <SelectOption
    value={{
      id: '1',
      label: 'Anakin',
    }}
    disabled={true}
  />
  <SelectOption
    value={{
      id: '2',
      label: 'Luke',
    }}
  />
  <SelectOption
    value={{
      id: '3',
      label: 'Yoda',
    }}
  />
  <SelectOption
    value={{
      id: '4',
      label: 'Solo',
    }}
    disabled={true}
  />
</Select>

DisplayOnly-Dropdown​

Durch Festlegen der Eigenschaft displayOnly auf true wird der Komponentenwert als Klartext angezeigt.

Hier ein Beispiel:

<Select
  label="Your favorite characters (Select component)"
  initialValue={{ id: '1', label: 'Anakin' }}
  displayOnly={true}>
  <SelectOption
    value={{
      id: '1',
      label: 'Anakin',
    }}
  />
</Select>

Kontrollierte Komponente​

Dieses Verhalten ist bei allen Dropdown-Komponenten gleich: Wenn die value-Eigenschaft festgelegt ist, kann der Benutzer die Komponente nicht direkt ändern. Stattdessen wird sie vollständig über die Implementierung durch Entwickler verwaltet.

Dieses Beispiel gilt für alle Dropdown-Komponenten:

export function SelectControlled() {
  const [updatedValue, setNewValue] = useState(null);

  const onChange = (e, newValue) => {
    setNewValue(newValue);
  };

  const options = [
    <SelectOption
      value={{
        id: '1',
        label: 'Option 1',
      }}
    />,
    <SelectOption
      value={{
        id: '2',
        label: 'Option 2',
      }}
    />,
    <SelectOption
      value={{
        id: '3',
        label: 'Option 3',
      }}
    />,
    <SelectOption
      value={{
        id: '4',
        label: 'Option 4',
      }}
    />,
    <SelectOption
      value={{
        id: '5',
        label: 'Option 5',
      }}
    />,
  ];

  return (
    <div>
      <Select
        label="Choose values"
        secondaryLabel="This value will be passed to the list of options below"
        onChange={onChange}>
        {options}
      </Select>
      <br />
      <Select
        label="Changes with the above"
        value={updatedValue}>
        {options}
      </Select>
    </div>
  );
}

Fokus auf die Dropdown-Komponente setzen​

Mit der Eigenschaft ref und den imperativen Handlern („focus“, „blur“ und „scrollIntoView“) ist es möglich, verschiedene native Aktionen auszuführen. Ein Beispiel ist, die Komponente zu fokussieren:

export functionSelectRef() {
  const selectRef = useRef(null);

  const setFocus = (e) => {
    selectRef?.current?.focus();
  };

  return (
    <div>
      <Button
        label="Set focus on Select"
        onClick={setFocus}
      ></Button>
      <Select
        label="Get the focus from the button"
        ref={selectRef}
      >
        <SelectOption
          value={{
            id: '1',
            label: 'Option 1',
          }}
        />
        <SelectOption
          value={{
            id: '2',
            label: 'Option 2',
          }}
        />
      </Select>
    </div>
  );
}

Komponentenvalidierung​

In den Dropdown-Komponenten lässt sich der Validierungsprozess nicht durchführen, aber Sie können den Fehlerstatus und die anzuzeigenden Meldungen über die Eigenschaft stateMessages bearbeiten.

Die Logik der Statusmeldungen gilt für alle Dropdown-Komponenten. Nachfolgend ein Beispiel für MultipleSelect:

export function SelectValidation() {
  const [validationMessages, setValidationMessages] = useState({});

  const onChange = useCallback((e, newValue) => {
    setValidationMessages({});

    if (newValue && newValue.label !== 'Option 2') {
      setValidationMessages({
        error: ['You must select option number 2'],
      });
    }
  }, []);

  return (
    <Select
      label="Select option 2"
      stateMessages={validationMessages}
      onChange={onChange}>
      <SelectOption
        value={{
          id: '1',
          label: 'Option 1',
        }}
      />
      <SelectOption
        value={{
          id: '2',
          label: 'Option 2',
        }}
      />
      <SelectOption
        value={{
          id: '3',
          label: 'Option 3',
        }}
      />
      <SelectOption
        value={{
          id: '4',
          label: 'Option 4',
        }}
      />
      <SelectOption
        value={{
          id: '5',
          label: 'Option 5',
        }}
      />
    </Select>
  );
}

Ausgewählte Option löschen​

Standardmäßig ist es in der Select-Komponente nicht möglich, dass der Benutzer eine ausgewählte Option löscht. Sie können diese Funktion mit einer der zwei verfügbaren Lösungen aktivieren.

Verwenden der Platzhalteroption​

Um das Löschen der ausgewählten Option zu aktivieren, verwenden Sie die Eigenschaften placeholder und showPlaceholderAsOption. In dieser Lösung ist der angegebene Platzhalter als erste Dropdown-Option verfügbar, sodass Benutzer die Auswahl der Option durch Auswählen aufheben können.

Sie müssen diese beiden Eigenschaften wie folgt festlegen:

  • placeholder darf nicht leer sein.
  • showPlaceholderAsOption auf true festlegen.

Dies ist die empfohlene Lösung zum Löschen der ausgewählten Option in der Select-Komponente, da sie den Standard-Designmustern entspricht und die Barrierefreiheit verbessert, indem interaktive Elemente im Dropdown-Menü vermieden werden.

<Select
  label="Your favorite character"
  initialValue={{ id: '1', label: 'Anakin' }}
  placeholder="Choose a character"
  showPlaceholderAsOption>
  <SelectOption
    value={{
      id: '1',
      label: 'Anakin',
    }}
  />
  <SelectOption
    value={{
      id: '2',
      label: 'Luke',
    }}
  />
</Select>

Verwenden der Symbolschaltfläche​

To enable clearing the input with a single click on the icon button, set the clearable property to true. The button appears when the option is selected. It allows the user to unselect the selected option.

Diese Lösung ermöglicht zwar ein bequemes Löschen mit nur einem Klick, führt aber ein interaktives Element im Dropdown-Menü ein, wodurch die Barrierefreiheit beeinträchtigt werden kann.

export function SelectClearable() {
  return (
    <Select
      label="Select a character"
      clearable={true}>
      <SelectOption value={{ id: '1', label: 'Anakin Skywalker' }} />
      <SelectOption value={{ id: '2', label: 'Luke Skywalker' }} />
      <SelectOption value={{ id: '3', label: 'Master Yoda' }} />
      <SelectOption value={{ id: '4', label: 'Han Solo' }} />
    </Select>
  );
}