SelectionList

Allows the user to select one or more items from a list of choices. Although it supports multi-selection, DS recommends the use of a selection list when it’s clear that the user can only select just one option from the range provided.

Source Code

uikit-react-core

<HvSelectionList 
  required={false}
  disabled={false}
  readOnly={false}
  multiple
  singleSelectionToggle={false}
  orientation="vertical"
  label="Favourite fruits"
  description="Choose your favourite fruits"
>
  <No Display Name value="avocado">
    🥑 Avocado
  </No Display Name>
  <No Display Name value="banana">
    🍌 Banana
  </No Display Name>
  <No Display Name value="carrot">
    🥕 Carrot
  </No Display Name>
  <No Display Name value="dragonfruit">
    🐉 Dragonfruit
  </No Display Name>
  <No Display Name value="eggplant">
    🍆 Eggplant
  </No Display Name>
</HvSelectionList>

<HvSelectionList 
  required={false}
  disabled={false}
  readOnly={false}
  multiple
  singleSelectionToggle={false}
  orientation="vertical"
  label="Favourite fruits"
  description="Choose your favourite fruits"
>
  <No Display Name value="avocado">
    🥑 Avocado
  </No Display Name>
  <No Display Name value="banana">
    🍌 Banana
  </No Display Name>
  <No Display Name value="carrot">
    🥕 Carrot
  </No Display Name>
  <No Display Name value="dragonfruit">
    🐉 Dragonfruit
  </No Display Name>
  <No Display Name value="eggplant">
    🍆 Eggplant
  </No Display Name>
</HvSelectionList>

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>
  );
}

Select Skeleton

SelectionList

Controlled

Related components