Fluxo UIFluxo UIv0.4.1

Dropdown

A versatile dropdown component for selecting single options with search and clear functionality.

Basic Usage

Basic Dropdown

Basic Example
import { Dropdown } from 'fluxo-ui';

function MyComponent() {
  const [value, setValue] = useState('');

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

  return (
    <Dropdown
      label="Select an option"
      placeholder="Choose one..."
      options={options}
      value={value}
      onChange={setValue}
    />
  );
}

Searchable Dropdown

Dropdown with Search

const frameworkOptions = [
  { label: 'React', value: 'react' },
  { label: 'Vue.js', value: 'vue' },
  { label: 'Angular', value: 'angular' },
  { label: 'Svelte', value: 'svelte' },
  // ... more options
];

<Dropdown
  label="Frontend Framework"
  placeholder="Search frameworks..."
  options={frameworkOptions}
  value={value}
  onChange={setValue}
  searchable
/>

Clearable Dropdown

Dropdown with Clear Button

<Dropdown
  label="Country"
  options={countryOptions}
  value={value}
  onChange={setValue}
  showClear
/>

Grouped Options

Dropdown with Grouped Items

const groupedOptions = [
  {
    label: 'Frontend',
    items: [
      { label: 'React', value: 'react' },
      { label: 'Vue.js', value: 'vue' },
      { label: 'Angular', value: 'angular' },
    ],
  },
  {
    label: 'Backend',
    items: [
      { label: 'Node.js', value: 'nodejs' },
      { label: 'Django', value: 'django' },
    ],
  },
];

<Dropdown
  label="Technology"
  placeholder="Select a technology..."
  options={groupedOptions}
  value={value}
  onChange={setValue}
  searchable
/>

Custom Field Mapping

Dropdown with optionLabel / optionValue

const countries = [
  { name: 'United States', code: 'US' },
  { name: 'Canada', code: 'CA' },
  { name: 'United Kingdom', code: 'UK' },
  { name: 'Germany', code: 'DE' },
];

<Dropdown
  label="Country"
  placeholder="Select a country..."
  options={countries}
  optionLabel="name"
  optionValue="code"
  value={value}
  onChange={setValue}
/>

States

Dropdown States

<Dropdown label="Normal" placeholder="Normal state" options={options} />
<Dropdown label="Selected" options={options} value="option2" onChange={setValue} />
<Dropdown label="Disabled" placeholder="Disabled state" options={options} disabled />
<Dropdown label="Read Only" options={options} value="option1" readonly />
<Dropdown label="Required" placeholder="Required field" options={options} required />
<Dropdown label="With Error" options={options} error="This field is required" />

Import

import { Dropdown } from 'fluxo-ui';

Props

value
any

Currently selected value (controlled component)

optionsreq
ListItem[] | ListItemGroup[]

Flat array of items or grouped items. Each group has a label, optional icon, and an items array.

onChange
function

Change event handler called with {event, value, name, args}

placeholder
string

Placeholder text when no option is selected

label
string

Label text for the dropdown

error
string

Error message to display

disabled
booleanfalse

Disable the dropdown

readonly
booleanfalse

Make the dropdown read-only

required
booleanfalse

Mark the dropdown as required

searchable
booleanfalse

Enable search/filter functionality

loading
booleanfalse

Show loading state

emptyMessage
string"No options available"

Message to display when no options are available

showClear
booleanfalse

Show clear button to deselect

renderItem
function

Custom render function for dropdown items: (item, index, isSelected, isHighlighted) => ReactNode

renderValue
function

Custom render function for selected value: (item) => ReactNode

id
string

HTML id attribute for the input element

name
string

HTML name attribute for form submission

args
any

Custom arguments passed to onChange event

optionLabel
string"label"

Property name to use as the display label from each option object

optionValue
string"value"

Property name to use as the value from each option object

className
string

Additional CSS classes

Features

Single Select

Controlled single-value selection with clear and searchable support

Searchable

Built-in filter input to quickly find options in long lists

Clearable

Optional clear button to reset selected value to empty

Grouped Options

Organize options into labeled groups with nested item arrays

Custom Field Mapping

optionLabel and optionValue props map any data shape to the dropdown

Custom Rendering

renderItem and renderValue callbacks for full JSX control over items

States

Disabled, read-only, required, error, and loading states built in

Accessibility

ARIA roles, keyboard navigation, and screen reader support

Theming

Full dark/light + 5 brand themes via CSS variables — zero extra config