Select

The `HvSelect` component is a form control element that allows selection from a list of options. It aims to be aligned with the native HTML `<select>` and `<option>` APIs and be easily integrated with forms.

Source Code

uikit-react-core

CountryPlease select a country

label

description

multiple

required

readOnly

disabled

<HvSelect 
  label="Country"
  description="Please select a country"
  multiple={false}
  required={false}
  readOnly={false}
  disabled={false}
  placeholder="Select a value"
>
  <No Display Name label="America">
    <No Display Name value="ar">
      Argentina
    </No Display Name>
    <No Display Name value="us">
      United States
    </No Display Name>
  </No Display Name>
  <No Display Name label="Europe">
    <No Display Name value="bg">
      Belgium
    </No Display Name>
    <No Display Name value="pt">
      Portugal
    </No Display Name>
    <No Display Name value="pl">
      Poland
    </No Display Name>
    <No Display Name value="sp">
      Spain
    </No Display Name>
  </No Display Name>
</HvSelect>

<HvSelect 
  label="Country"
  description="Please select a country"
  multiple={false}
  required={false}
  readOnly={false}
  disabled={false}
  placeholder="Select a value"
>
  <No Display Name label="America">
    <No Display Name value="ar">
      Argentina
    </No Display Name>
    <No Display Name value="us">
      United States
    </No Display Name>
  </No Display Name>
  <No Display Name label="Europe">
    <No Display Name value="bg">
      Belgium
    </No Display Name>
    <No Display Name value="pt">
      Portugal
    </No Display Name>
    <No Display Name value="pl">
      Poland
    </No Display Name>
    <No Display Name value="sp">
      Spain
    </No Display Name>
  </No Display Name>
</HvSelect>

Options

As an alternative to the HvOption children, HvSelect supports passing an options array of options (with value and label).

Keep in mind that the children is more flexible, as it allows using HvOptionGroup and distinct label and rendering (children) values.

CountryPlease select a country

<HvSelect
  label="Country"
  description="Please select a country"
  placeholder="Select a value"
  options={[
    { value: "ar", label: "Argentina" },
    { value: "bg", label: "Belgium" },
    { value: "pt", label: "Portugal" },
    { value: "pl", label: "Poland" },
    { value: "sp", label: "Spain", disabled: true },
    { value: "us", label: "United States" },
  ]}
/>

<HvSelect
  label="Country"
  description="Please select a country"
  placeholder="Select a value"
  options={[
    { value: "ar", label: "Argentina" },
    { value: "bg", label: "Belgium" },
    { value: "pt", label: "Portugal" },
    { value: "pl", label: "Poland" },
    { value: "sp", label: "Spain", disabled: true },
    { value: "us", label: "United States" },
  ]}
/>

Form

To integrate HvSelect in a form, make sure you’re giving it a name. The value result will be the selected option’s value, or a JSON of the selected values when multi-select is enabled. The value can be customized via the getSerializedValue prop.

<form
  onSubmit={(evt) => {
    evt.preventDefault();
    const formData = new FormData(evt.currentTarget);
    alert(JSON.stringify(Object.fromEntries(formData)));
  }}
>
  <HvSelect
    multiple
    required
    name="countries"
    label="Country"
    description="Select your favorite countries"
    placeholder="Select countries"
    getSerializedValue={(values) => values.map((v) => v.value).join(",")}
    options={[
      { value: "ar", label: "Argentina" },
      { value: "bg", label: "Belgium" },
      { value: "pt", label: "Portugal" },
      { value: "pl", label: "Poland" },
      { value: "sp", label: "Spain" },
      { value: "us", label: "United States" },
    ]}
  />
  <br />
  <HvButton type="submit" variant="secondarySubtle">
    Submit
  </HvButton>
</form>

<form
  onSubmit={(evt) => {
    evt.preventDefault();
    const formData = new FormData(evt.currentTarget);
    alert(JSON.stringify(Object.fromEntries(formData)));
  }}
>
  <HvSelect
    multiple
    required
    name="countries"
    label="Country"
    description="Select your favorite countries"
    placeholder="Select countries"
    getSerializedValue={(values) => values.map((v) => v.value).join(",")}
    options={[
      { value: "ar", label: "Argentina" },
      { value: "bg", label: "Belgium" },
      { value: "pt", label: "Portugal" },
      { value: "pl", label: "Poland" },
      { value: "sp", label: "Spain" },
      { value: "us", label: "United States" },
    ]}
  />
  <br />
  <HvButton type="submit" variant="secondarySubtle">
    Submit
  </HvButton>
</form>

Controlled

The value and open states of HvSelect can be controlled by using the value/onChange and open/onOpenChange props respectively.

import { useState } from "react";
import { HvButton, HvOption, HvSelect } from "@hitachivantara/uikit-react-core";


export default function Demo() {
  const [selection, setSelection] = useState<string[]>([]);
  const [open, setOpen] = useState(false);


  const anySelected = selection.length > 0;


  return (
    <>
      <HvSelect
        multiple
        required
        open={open}
        name="countries"
        aria-label="Country"
        placeholder="Select countries"
        value={selection}
        style={{ width: 300 }}
        onChange={(evt, val) => setSelection(val)}
        onOpenChange={setOpen}
      >
        {options.map(({ value, label, flag }) => (
          <HvOption key={value} value={value} label={label}>
            {`${flag} ${label}`}
          </HvOption>
        ))}
      </HvSelect>
      <HvButton
        style={{ width: 120 }}
        variant="secondarySubtle"
        onClick={() => {
          setSelection(anySelected ? [] : options.map((o) => o.value));
        }}
      >
        {anySelected ? "Deselect all" : "Select all"}
      </HvButton>
    </>
  );
}


const options = [
  { value: "ar", label: "Argentina", flag: "🇦🇷" },
  { value: "bg", label: "Belgium", flag: "🇧🇪" },
  { value: "pt", label: "Portugal", flag: "🇵🇹" },
  { value: "pl", label: "Poland", flag: "🇵🇱" },
  { value: "sp", label: "Spain", flag: "🇪🇸" },
  { value: "us", label: "United States", flag: "🇺🇸" },
];

import { useState } from "react";
import { HvButton, HvOption, HvSelect } from "@hitachivantara/uikit-react-core";

export default function Demo() {
  const [selection, setSelection] = useState<string[]>([]);
  const [open, setOpen] = useState(false);

  const anySelected = selection.length > 0;

  return (
    <>
      <HvSelect
        multiple
        required
        open={open}
        name="countries"
        aria-label="Country"
        placeholder="Select countries"
        value={selection}
        style={{ width: 300 }}
        onChange={(evt, val) => setSelection(val)}
        onOpenChange={setOpen}
      >
        {options.map(({ value, label, flag }) => (
          <HvOption key={value} value={value} label={label}>
            {`${flag} ${label}`}
          </HvOption>
        ))}
      </HvSelect>
      <HvButton
        style={{ width: 120 }}
        variant="secondarySubtle"
        onClick={() => {
          setSelection(anySelected ? [] : options.map((o) => o.value));
        }}
      >
        {anySelected ? "Deselect all" : "Select all"}
      </HvButton>
    </>
  );
}

const options = [
  { value: "ar", label: "Argentina", flag: "🇦🇷" },
  { value: "bg", label: "Belgium", flag: "🇧🇪" },
  { value: "pt", label: "Portugal", flag: "🇵🇹" },
  { value: "pl", label: "Poland", flag: "🇵🇱" },
  { value: "sp", label: "Spain", flag: "🇪🇸" },
  { value: "us", label: "United States", flag: "🇺🇸" },
];

Section Selection List

Select

Options

Form

Controlled

Related components