Dropdown Component

The Dropdown component in goobs-frontend is a customizable select input that allows users to choose from a list of options. It provides a user-friendly interface for selection with various styling options and features.

Importing the Component

To use the Dropdown component in your project, import it from the goobs-frontend package:

import { Dropdown } from 'goobs-frontend';

Basic Usage

Here's a basic example of how to use the Dropdown component:

import React from 'react';
import { Dropdown } from 'goobs-frontend';

const DropdownExample: React.FC = () => {
  const options = [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
  ];

  return (
    <Dropdown
      label="Select an option"
      options={options}
      onChange={(event) => console.log('Selected:', event.target.value)}
    />
  );
};

export default DropdownExample;

Props

The Dropdown component accepts the following props:

• label: string (required) - The label for the dropdown.
• options: DropdownOption[] (required) - An array of options for the dropdown.
• defaultValue: string (optional) - The default selected value.
• backgroundcolor: string (optional) - The background color of the dropdown.
• outlinecolor: string (optional) - The outline color of the dropdown.
• fontcolor: string (optional) - The font color of the dropdown text.
• shrunkfontcolor: string (optional) - The font color of the label when shrunk.
• onChange: SelectProps['onChange'] (optional) - Callback function triggered when the selection changes.
• error: boolean (optional) - Indicates if the dropdown is in an error state.
• helperText: string (optional) - Helper text to display below the dropdown.
• name: string (optional) - The name of the dropdown.
• required: boolean (optional) - Indicates if the dropdown is required.
• onBlur: SelectProps['onBlur'] (optional) - Callback function triggered when the dropdown loses focus.
• onFocus: SelectProps['onFocus'] (optional) - Callback function triggered when the dropdown gains focus.

Additionally, it supports all standard Material-UI Select props.

Features

1. Customizable Options: Supports an array of options with values and labels.
2. Styling Customization: Allows customization of background, outline, and font colors.
3. Error State: Supports an error state for form validation.
4. Helper Text: Can display helper text below the dropdown for additional information or error messages.
5. Accessibility: Includes proper labeling and ARIA attributes for screen readers.

Styling

You can customize the appearance of the Dropdown component using the provided props. Here's an example with custom styling:

import React from 'react';
import { Dropdown } from 'goobs-frontend';

const StyledDropdownExample: React.FC = () => {
  const options = [
    { value: 'red', label: 'Red' },
    { value: 'blue', label: 'Blue' },
    { value: 'green', label: 'Green' },
  ];

  return (
    <Dropdown
      label="Choose a color"
      options={options}
      backgroundcolor="#f0f0f0"
      outlinecolor="#3f51b5"
      fontcolor="#333"
      shrunkfontcolor="#3f51b5"
      onChange={(event) => console.log('Selected color:', event.target.value)}
    />
  );
};

export default StyledDropdownExample;

Advanced Usage

With Form Validation

You can use the Dropdown component with form validation, utilizing the error and helperText props:

import React, { useState } from 'react';
import { Dropdown } from 'goobs-frontend';

const ValidatedDropdownExample: React.FC = () => {
  const [value, setValue] = useState('');
  const [error, setError] = useState(false);

  const options = [
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    { value: 'option3', label: 'Option 3' },
  ];

  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
    const selectedValue = event.target.value as string;
    setValue(selectedValue);
    setError(selectedValue === '');
  };

  return (
    <Dropdown
      label="Select an option"
      options={options}
      value={value}
      onChange={handleChange}
      error={error}
      helperText={error ? 'Please select an option' : ''}
      required
    />
  );
};

export default ValidatedDropdownExample;

Grouping Options

You can group options in the Dropdown by using the Material-UI <ListSubheader> component:

import React from 'react';
import { Dropdown } from 'goobs-frontend';
import { ListSubheader } from '@mui/material';

const GroupedDropdownExample: React.FC = () => {
  const options = [
    <ListSubheader>Category 1</ListSubheader>,
    { value: 'option1', label: 'Option 1' },
    { value: 'option2', label: 'Option 2' },
    <ListSubheader>Category 2</ListSubheader>,
    { value: 'option3', label: 'Option 3' },
    { value: 'option4', label: 'Option 4' },
  ];

  return (
    <Dropdown
      label="Grouped options"
      options={options}
      onChange={(event) => console.log('Selected:', event.target.value)}
    />
  );
};

export default GroupedDropdownExample;

Accessibility

The Dropdown component is designed with accessibility in mind:

• It uses proper labeling to describe the dropdown's purpose.
• The component is keyboard navigable.
• It supports screen readers for announcing the selected option.

To further enhance accessibility, consider providing clear instructions or context around the dropdown when necessary.

Best Practices

1. Clear Labels: Use descriptive labels to indicate the purpose of the dropdown.
2. Logical Ordering: Order your options in a logical manner (e.g., alphabetically or by relevance).
3. Default Selection: Consider providing a default selection when appropriate.
4. Error Handling: Provide clear error messages for invalid selections.
5. Responsive Design: Ensure the dropdown works well on various screen sizes and devices.

Performance Considerations

The Dropdown component is generally lightweight, but keep in mind:

• For dropdowns with a large number of options, consider implementing virtualization or lazy loading.
• If the options are fetched from an API, implement proper loading states and error handling.

Troubleshooting

1. Options Not Displaying: Ensure the options prop is correctly formatted as an array of objects with value and label properties.
2. Styling Issues: Check the specificity of your CSS if custom styles are not applying correctly.
3. onChange Not Firing: Verify that the onChange prop is correctly passed and is a valid function.

By leveraging these features and following the best practices, you can effectively use the Dropdown component in your goobs-frontend projects to create user-friendly selection interfaces.