Dropdown

The Dropdown component is a flexible and feature-rich form control that allows users to select from a list of options. It supports various states, validation, and custom styling while maintaining accessibility standards.

Import

import { Dropdown } from 'h2o-library';

Basic Usage

Simple Dropdown

<Dropdown
  label="Select an option"
  options={[
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" },
    { label: "Option 3", value: "3" }
  ]}
  placeholder="Choose an option..."
/>

Dropdown with Value

<Dropdown
  label="Controlled Dropdown"
  options={[
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" },
    { label: "Option 3", value: "3" }
  ]}
  value="1"
  onChange={(value) => console.log(value)}
/>

Dropdown Sizes

<Dropdown
  size="sm"
  label="Small Dropdown"
  options={[
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" }
  ]}
/>
<Dropdown
  size="md"
  label="Medium Dropdown"
  options={[
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" }
  ]}
/>
<Dropdown
  size="lg"
  label="Large Dropdown"
  options={[
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" }
  ]}
/>

Dropdown States

<Dropdown
  label="Disabled Dropdown"
  options={[
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" }
  ]}
  disabled
/>
<Dropdown
  label="With Error"
  options={[
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" }
  ]}
  error="This field is required"
/>
<Dropdown
  label="With Note"
  options={[
    { label: "Option 1", value: "1" },
    { label: "Option 2", value: "2" }
  ]}
  note="This is a helpful note"
/>

Interactive Examples

For interactive examples including all features and states, check out our example component:

Props

Prop	Type	Default	Description
label	string	-	The label text for the dropdown
size	"sm" | "md" | "lg"	"md"	The size of the dropdown
showClear	boolean	false	Whether to show a clear button
note	string	-	Helper text below the dropdown
error	string	-	Error message below the dropdown
containerClassName	string	-	Additional CSS classes for the container
options	DropdownOption[]	-	Array of options to display
placeholder	string	"Select an option"	Placeholder text when no option is selected
value	string	-	The selected value
onChange	(value: string) => void	-	Callback when selection changes

Plus all standard HTML button attributes except size.

Design Considerations

• Clear visual hierarchy with labels and helper text
• Consistent spacing and alignment
• Visual feedback for different states (focus, error, disabled)
• Support for both controlled and uncontrolled usage
• Flexible option structure with disabled states
• Clear button for easy value reset
• Custom styling options for both container and dropdown
• Automatic positioning of dropdown menu based on available space

Accessibility

• Proper label association with dropdown
• Clear focus states
• Error messages are properly announced
• Helper text provides additional context
• Keyboard navigation support
• Clear button is properly labeled
• ARIA attributes are automatically handled
• Screen readers announce the current state and any errors
• Dropdown menu is properly positioned for keyboard users