SelectionList

SelectionList allows users to select one or more items from a list.

While it supports multi-selection, it’s recommended to use it when it’s clear that only a single option should be selected.

Source Code

uikit-react-core

If you need single selection, consider using HvRadioGroup or HvSelect instead.

Controlled

The value of HvSelectionList can be controlled by using the value/onChange. Status is controlled via the status and statusMessage props.

Choose the best fruits

import { useState } from "react";


export default function Demo() {
  const [value, setValue] = useState(["2"]);
  const [status, setStatus] = useState<HvFormStatus>("standBy");


  return (
    <HvSelectionList
      multiple
      label="Choose the best fruits"
      value={value}
      onChange={(evt, newValue) => {
        setValue(newValue);
        setStatus(newValue?.includes("dragon") ? "invalid" : "valid");
      }}
      status={status}
      statusMessage="Dragon is not a fruit!"
    >
      <HvListItem value="avocado">🥑 Avocado</HvListItem>
      <HvListItem value="banana">🍌 Banana</HvListItem>
      <HvListItem value="carrot">🥕 Carrot</HvListItem>
      <HvListItem value="dragon">🐉 Dragon</HvListItem>
      <HvListItem value="eggplant">🍆 Eggplant</HvListItem>
    </HvSelectionList>
  );
}

import { useState } from "react";

export default function Demo() {
  const [value, setValue] = useState(["2"]);
  const [status, setStatus] = useState<HvFormStatus>("standBy");

  return (
    <HvSelectionList
      multiple
      label="Choose the best fruits"
      value={value}
      onChange={(evt, newValue) => {
        setValue(newValue);
        setStatus(newValue?.includes("dragon") ? "invalid" : "valid");
      }}
      status={status}
      statusMessage="Dragon is not a fruit!"
    >
      <HvListItem value="avocado">🥑 Avocado</HvListItem>
      <HvListItem value="banana">🍌 Banana</HvListItem>
      <HvListItem value="carrot">🥕 Carrot</HvListItem>
      <HvListItem value="dragon">🐉 Dragon</HvListItem>
      <HvListItem value="eggplant">🍆 Eggplant</HvListItem>
    </HvSelectionList>
  );
}

SelectionList

Controlled

Related components