Dropdown

The Dropdown component is a form control that allows users to select a single option from a list of choices.

Basic Usage

import { Dropdown, ThemeProvider } from "@carton-org/react-neumorphism";

const MyComponent = () => {
  const options = [
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" },
    { label: "Option 3", value: "3" },
  ];

  const handleChange = (value: string) => {
    console.log("Selected value:", value);
  };

  return (
    <Dropdown
      options={options}
      placeholder="Select an option"
      onChange={handleChange}
      size="md"
    />
  );
};

Live Example

Select an option

Option 1

Option 2

Option 3

Props

Name	Type	Description	Required	Default Value
value	string	Currently selected value	No	-
placeholder	string	Placeholder text when no option is selected	No	-
options	Array<{ label: string, value: string }>	Array of options to display in the dropdown	Yes	-
onChange	(value: string) => void	Callback function when selection changes	Yes	-
size	"xs" | "sm" | "md" | "lg" | "xl"	Size of the dropdown	No	"sm"
dropdownHeaderLabelStyle	React.CSSProperties	Custom styles for the dropdown header label	No	-
dropdownHeaderStyle	React.CSSProperties	Custom styles for the dropdown header	No	-
dropdownContentStyle	React.CSSProperties	Custom styles for the dropdown content	No	-
dropdownOptionLabelStyle	React.CSSProperties	Custom styles for the dropdown option labels	No	-
dropdownOptionItemStyle	React.CSSProperties	Custom styles for the dropdown option items	No	-

Examples

Different Sizes

Small Size

Small dropdown

Small Option 1

Small Option 2

Medium Size

Medium dropdown

Medium Option 1

Medium Option 2

Large Size

Large dropdown

Large Option 1

Large Option 2

With Selected Value

Option 2

Option 1

Option 2

Option 3