Select Component

Overview

The Select component provides a dropdown selection interface that allows users to choose from a list of options. It's designed for forms and settings where users need to select from predefined options.

Basic Usage

import { Select } from '@dashflowx/core'

export default function SelectExample() {
  const items = [
    { id: 'option1', itemElement: 'Option 1' },
    { id: 'option2', itemElement: 'Option 2' },
    { id: 'option3', itemElement: 'Option 3' }
  ];

  return (
    <Select 
      items={items}
      selected="option1"
      isOpen={false}
      onClose={() => {}}
    />
  )
}

Preview:

Option 1

Option 2

Option 3

Props

Prop	Type	Default	Description
`items`	`Array<iSelectItems>`	`[]`	Array of select items
`selected`	`string`	-	Currently selected item ID
`isOpen`	`boolean`	`false`	Whether the dropdown is open
`onClose`	`function`	-	Function to close the dropdown

Select Item Structure

interface iSelectItems {
  id: string;
  itemElement: JSX.Element;
}

Examples

Basic Select

import { Select } from '@dashflowx/core'

export default function BasicSelect() {
  const items = [
    { id: 'option1', itemElement: 'Option 1' },
    { id: 'option2', itemElement: 'Option 2' },
    { id: 'option3', itemElement: 'Option 3' }
  ];

  return (
    <Select 
      items={items}
      selected="option1"
      isOpen={false}
      onClose={() => {}}
    />
  )
}

Preview:

Option 1

Option 2

Option 3

Custom Styled Select

import { Select } from '@dashflowx/core'

export default function CustomStyledSelect() {
  const items = [
    { id: 'option1', itemElement: 'Option 1' },
    { id: 'option2', itemElement: 'Option 2' },
    { id: 'option3', itemElement: 'Option 3' }
  ];

  return (
    <Select 
      items={items}
      selected="option1"
      isOpen={false}
      onClose={() => {}}
      className="border border-blue-500 rounded-lg p-4"
    />
  )
}

Preview:

Option 1

Option 2

Option 3

Form Select

import { Select } from '@dashflowx/core'

export default function FormSelect() {
  const items = [
    { id: 'male', itemElement: 'Male' },
    { id: 'female', itemElement: 'Female' },
    { id: 'other', itemElement: 'Other' }
  ];

  return (
    <Select 
      items={items}
      selected="male"
      isOpen={false}
      onClose={() => {}}
    />
  )
}

Preview:

Male

Female

Other

Settings Select

import { Select } from '@dashflowx/core'

export default function SettingsSelect() {
  const items = [
    { id: 'light', itemElement: 'Light Theme' },
    { id: 'dark', itemElement: 'Dark Theme' },
    { id: 'auto', itemElement: 'Auto' }
  ];

  return (
    <Select 
      items={items}
      selected="auto"
      isOpen={false}
      onClose={() => {}}
    />
  )
}

Preview:

Light Theme

Dark Theme

Auto

Language Selection

import { Select } from '@dashflowx/core'

export default function LanguageSelection() {
  const items = [
    { id: 'en', itemElement: 'English' },
    { id: 'es', itemElement: 'Spanish' },
    { id: 'fr', itemElement: 'French' },
    { id: 'de', itemElement: 'German' }
  ];

  return (
    <Select 
      items={items}
      selected="en"
      isOpen={false}
      onClose={() => {}}
    />
  )
}

Preview:

English

Spanish

French

German

Common Use Cases

Form Gender Selection

const genderSelection = (
  <Select 
    items={[
      { id: 'male', itemElement: 'Male' },
      { id: 'female', itemElement: 'Female' },
      { id: 'other', itemElement: 'Other' }
    ]}
    selected="male"
    isOpen={false}
    onClose={() => {}}
  />
);

Theme Selection

const themeSelection = (
  <Select 
    items={[
      { id: 'light', itemElement: 'Light' },
      { id: 'dark', itemElement: 'Dark' },
      { id: 'auto', itemElement: 'Auto' }
    ]}
    selected="auto"
    isOpen={false}
    onClose={() => {}}
  />
);

Language Selection

const languageSelection = (
  <Select 
    items={[
      { id: 'en', itemElement: 'English' },
      { id: 'es', itemElement: 'Spanish' },
      { id: 'fr', itemElement: 'French' }
    ]}
    selected="en"
    isOpen={false}
    onClose={() => {}}
  />
);

Size Selection

const sizeSelection = (
  <Select 
    items={[
      { id: 'small', itemElement: 'Small' },
      { id: 'medium', itemElement: 'Medium' },
      { id: 'large', itemElement: 'Large' }
    ]}
    selected="medium"
    isOpen={false}
    onClose={() => {}}
  />
);

Best Practices

1. Clear Options

Use clear and descriptive options for select items.

// ✅ Good - Clear options
const items = [
  { id: 'light', itemElement: 'Light Theme' },
  { id: 'dark', itemElement: 'Dark Theme' }
];

// ❌ Avoid - Unclear options
const items = [
  { id: 'opt1', itemElement: 'Option 1' },
  { id: 'opt2', itemElement: 'Option 2' }
];

2. Logical Default Values

Set logical default values based on context.

// ✅ Good - Logical default
<Select selected="auto" />

// ❌ Avoid - Random default
<Select selected="option2" />

3. Consistent Styling

Maintain consistent styling across select components.

// ✅ Good - Consistent styling
<Select className="standard-select-style" />

// ❌ Avoid - Inconsistent styling
<Select className="random-styles" />

4. Accessible Options

Ensure all select options are accessible.

// ✅ Good - Accessible options
const items = [
  { id: 'option1', itemElement: 'Option 1' }
];

// ❌ Avoid - Inaccessible options
const items = [
  { id: 'option1', itemElement: '' }
];

5. Unique IDs

Use unique IDs for each select option.

// ✅ Good - Unique IDs
const items = [
  { id: 'theme-light', itemElement: 'Light' },
  { id: 'theme-dark', itemElement: 'Dark' }
];

// ❌ Avoid - Duplicate IDs
const items = [
  { id: 'option', itemElement: 'Light' },
  { id: 'option', itemElement: 'Dark' }
];

Customization

Custom Styling

You can customize the select appearance using CSS classes:

<Select 
  items={items}
  selected="option1"
  isOpen={false}
  onClose={() => {}}
  className="border border-gray-300 rounded-lg p-4"
/>

Different Themes

Use different themes for different contexts:

// Light theme
<Select className="bg-white border-gray-200" />

// Dark theme
<Select className="bg-gray-900 border-gray-700 text-white" />

// Brand theme
<Select className="bg-blue-50 border-blue-200" />

Size Variations

Use different sizes for different emphasis levels:

// Small select
<Select className="text-sm" />

// Standard select
<Select className="text-base" />

// Large select
<Select className="text-lg" />

Advanced Usage

Dynamic Select Options

Load select options dynamically:

const [selectOptions, setSelectOptions] = useState([]);

useEffect(() => {
  // Load options based on user permissions
  loadSelectOptions().then(setSelectOptions);
}, []);

Conditional Select Options

Show/hide select options based on conditions:

const getSelectOptions = (userRole) => {
  const baseOptions = [
    { id: 'basic', itemElement: 'Basic' }
  ];
  
  if (userRole === 'admin') {
    baseOptions.push({ id: 'admin', itemElement: 'Admin' });
  }
  
  return baseOptions;
};

Select State Management

Handle select state:

const [selectedValue, setSelectedValue] = useState('option1');

const handleSelectChange = (value) => {
  setSelectedValue(value);
  // Handle value change
};

RadioGroup: For single selections
Checkbox: For multiple selections
Switch: For toggle options
Form: For form containers
Label: For form labels

API Reference

For the complete API reference and advanced usage patterns, see the Select API documentation.

Overview

Basic Usage

Props

Select Item Structure

Examples

Basic Select

Custom Styled Select

Form Select

Settings Select

Language Selection

Common Use Cases

Form Gender Selection

Theme Selection

Language Selection

Size Selection

Best Practices

1. Clear Options

2. Logical Default Values

3. Consistent Styling

4. Accessible Options

5. Unique IDs

Customization

Custom Styling

Different Themes

Size Variations

Advanced Usage

Dynamic Select Options

Conditional Select Options

Select State Management

Related Components

API Reference