Dropdown

A styled dropdown component for selecting a single item from a list of items.

See all the examples and details in the Storybook.

Usage

import { Dropdown } from "@samgl/graffiti-ui";

const MyDropdown = () => {
  return (
    <Dropdown
      label="What is your favourite fruit?"
      items={[
        { label: "Orange", value: "orange" },
        { label: "Banana", value: "banana" },
        { label: "Apple", value: "apple" },
        { label: "Grapefruit", value: "grapefruit" },
        { label: "Pineapple", value: "pineapple" },
        { label: "Grapes", value: "grapes" },
      ]}
    />
  );
};

Props

Prop	Type	Default	Optional	Description
label	string		❌	The label to show above the dropdown.
items	DropdownProps[items]		❌	An array of items to display in the dropdown.