Select

Single-value dropdown with arrow-key navigation, typeahead, and subtle open/close animation.

Installation

npx @obi/ui add select

Preview

Framework

The framework your project uses.

Disabled

Error state

This field is required.

Usage

'use client';

import { useState } from 'react';
import { Select } from '@/src/components/Select/Select';

const FRAMEWORKS = [
  { value: 'next',    label: 'Next.js'  },
  { value: 'remix',   label: 'Remix'    },
  { value: 'astro',   label: 'Astro'    },
  { value: 'sveltekit', label: 'SvelteKit' },
];

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

  return (
    <Select
      label="Framework"
      placeholder="Choose a framework…"
      options={FRAMEWORKS}
      value={value}
      onChange={setValue}
      hint="The framework your project uses."
    />
  );
}

Props

Name	Type	Default	Description
options	SelectOption[]	—	Array of { value, label } objects.
value	string	undefined	Controlled selected value.
onChange	(value: string) => void	undefined	Called when a selection is made.
placeholder	string	'Select…'	Shown when no value is selected.
label	string	undefined	Visible label above the trigger.
hint	string	undefined	Helper text (hidden when error is set).
error	string	undefined	Error message; switches trigger to error state.
size	'sm' \| 'md'	'md'	Trigger height and text size.
disabled	boolean	false	Prevents interaction.
className	string	''	Additional classes on the root wrapper.