ComboInput Component

A powerful combo box component combining text input with dropdown selection for flexible user input.

Live Preview

Single Select

Current value: -

Multiple Select

Current values: -

Usage

import { ComboInput } from '@featherstudio/react-daisyui-kit';
import { useState } from 'react';

export default function App() {
  const [singleValue, setSingleValue] = useState('');
  const [multiValue, setMultiValue] = useState<string[]>([]);

  const options = [
    { value: 'react', label: 'React' },
    { value: 'nextjs', label: 'Next.js' },
  ];

  return (
    <>
      <ComboInput
        value={singleValue}
        onChange={(value) => setSingleValue(value as string)}
        options={options}
      />

      <ComboInput
        value={multiValue}
        onChange={(value) => setMultiValue(value as string[])}
        options={options}
        multiple
      />
    </>
  );
}

Features

Text Input + Dropdown

Combined input and selection experience.

Searchable

Filter options while typing.

Flexible

Allow custom values or predefined options.

Accessible

Full keyboard navigation support.

Props

Prop	Type	Default	Description
value	string \| string[]	-	Current value (string for single, string[] for multiple)
onChange	(value: string \| string[]) => void	-	Called with the next value
options	(string \| { value: string; label?: string })[]	[]	Dropdown options used for filtering and selection
multiple	boolean	false	Enable multi-select mode with tags
allowClear	boolean	true	Show clear button when there is a value
maxDropdownHeight	number	200	Maximum dropdown height in pixels

← Back to Components