Select

A fully accessible select component that allows users to choose one option from a list. Built with Headless UI for robust functionality.

Props

Prop	Type	Default	Description
options	array	-	Array of option objects. Each must have `id` and `name`.
selected	object	-	The currently selected option object from the `options` array.
setSelected	function	-	The state setter function to update the selected option.
label	string	-	An optional label displayed above the select input.

Examples

Basic Select

A standard select input with a label.

Assigned to

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

const people = [
  { id: 1, name: 'Wade Cooper' },
  { id: 2, name: 'Arlene Mccoy' },
  // ... more options
];

export default function MyComponent() {
  const [selected, setSelected] = useState(people[0]);

  return (
    <Select 
      label="Assigned to"
      options={people}
      selected={selected}
      setSelected={setSelected}
    />
  );
}