Select

A styled select dropdown with keyboard navigation.

Installation

Package

import { Select } from '@smc/darwin-ui';

shadcn CLI

npx shadcn add https://darwin-ui.mandalsuraj.com/registry/select.json

Usage

import { Select } from '@smc/darwin-ui';

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

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

  return (
    <Select
      options={options}
      value={value}
      onChange={setValue}
      placeholder="Select an option"
    />
  );
}

API Reference

Props

Prop	Type	Default	Description
options	Option[]	-	Available options
value	string	-	Selected value
onChange	(value: string) => void	-	Change handler
placeholder	string	-	Placeholder text
disabled	boolean	false	Disable select

Option Type

interface Option {
  value: string;
  label: string;
}