Dropdown

A dropdown list is a graphical control element, similar to a list box, that allows the user to choose one value from a list.

Source Code

uikit-react-core

<HvDropdown 
  label="Select value"
  description="Description"
  required={false}
  readOnly={false}
  disabled={false}
  multiSelect={false}
  showSearch={false}
  values={[{"label":"value 1"},{"label":"value 2"},{"label":"value 3"},{"label":"value 4"}]}
/>

<HvDropdown 
  label="Select value"
  description="Description"
  required={false}
  readOnly={false}
  disabled={false}
  multiSelect={false}
  showSearch={false}
  values={[{"label":"value 1"},{"label":"value 2"},{"label":"value 3"},{"label":"value 4"}]}
/>

Customized items

The items in the values prop can be can be customized, namely with an icon or custom content on the label prop. Each item can be individually disabled also.

<HvDropdown
  values={[
    { id: "save", label: "Save", icon: <Save /> },
    { id: "export", label: "Export", icon: <Open />, disabled: true },
    {
      id: "preview",
      label: <HvTypography variant="label">Preview</HvTypography>,
      icon: <Preview />,
    },
  ]}
/>

<HvDropdown
  values={[
    { id: "save", label: "Save", icon: <Save /> },
    { id: "export", label: "Export", icon: <Open />, disabled: true },
    {
      id: "preview",
      label: <HvTypography variant="label">Preview</HvTypography>,
      icon: <Preview />,
    },
  ]}
/>

Drawer Dropdown Menu

Dropdown

Customized items

Related components