Home/Components/Select

Select Component

A dropdown select component that allows users to choose from a list of predefined options with easy navigation and keyboard support.

Form Control

Live Preview

Choose an option

Usage

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

export default function App() {
  const [value, setValue] = useState('');

  return (
    <Select
      value={value}
      onChange={(nextValue) => setValue(String(nextValue ?? ''))}
      placeholder="Please choose an option"
      options={[
        { value: 'opt1', label: 'Option 1' },
        { value: 'opt2', label: 'Option 2' },
        { value: 'opt3', label: 'Option 3' },
      ]}
    />
  );
}

Features

Flexible Options

Easily define options with values and labels.

Keyboard Support

Full keyboard navigation and accessibility support.

Default Value

Set default selection with a simple prop.

Disabled State

Disable individual options or entire select.

Props

Prop	Type	Default	Description
options	array	-	Select options array
value	string \| readonly string[] \| number \| undefined	-	Selected value
onChange	(value) => void	-	Change handler called with the selected value
disabled	boolean	false	Disable select
size	'sm' \| 'md' \| 'lg'	'md'	Controls the DaisyUI select size
placeholder	string	-	Placeholder text

← Back to Components