Select

A dropdown to pick one option from a list. The list opens in a portal, so it is never clipped by a scrolling window body and stays above floating windows.

import { Select } from 'jarvis-react-ui';

Basic

Pass the options as options, each with a unique value and a label. placeholder is shown while nothing is selected; disabled options can't be picked.

import { Select } from 'jarvis-react-ui';

export default function Basic() {
    return (
        <Select
            aria-label="Voice"
            placeholder="Choose a voice…"
            options={[
                { value: 'jarvis', label: 'JARVIS' },
                { value: 'friday', label: 'FRIDAY' },
                { value: 'edith', label: 'EDITH' },
                { value: 'karen', label: 'KAREN', disabled: true },
            ]}
        />
    );
}

Controlled, with icons

Pass value and update it in onValueChange. icon shows content before the label, in the list and in the trigger.

import { useState } from 'react';
import { Globe, Moon, Sun } from 'lucide-react';
import { Select } from 'jarvis-react-ui';

export default function Controlled() {
    const [theme, setTheme] = useState('night');

    return (
        <div className="flex flex-col gap-3">
            <Select
                aria-label="Display mode"
                value={theme}
                onValueChange={setTheme}
                options={[
                    { value: 'night', label: 'Night', icon: <Moon size={12} /> },
                    { value: 'day', label: 'Day', icon: <Sun size={12} /> },
                    { value: 'auto', label: 'Follow location', icon: <Globe size={12} /> },
                ]}
            />
            <span className="text-[10px] text-text-secondary">Value: {theme}</span>
        </div>
    );
}

States

size="sm" for dense layouts, invalid for validation errors, disabled to lock it. With name the value is submitted with a surrounding <form>.

import { Select } from 'jarvis-react-ui';

const OPTIONS = [
    { value: 'a', label: 'Alpha' },
    { value: 'b', label: 'Bravo' },
];

export default function States() {
    return (
        <div className="flex flex-col gap-3">
            <Select aria-label="Small" size="sm" options={OPTIONS} defaultValue="a" />
            <Select aria-label="Invalid" invalid options={OPTIONS} />
            <Select aria-label="Disabled" disabled options={OPTIONS} defaultValue="b" />
        </div>
    );
}

Sound

Opening plays menu_open, closing menu_close and picking an option click; hovering the trigger plays hover_button. See Sound effects.

Accessibility

• The trigger is a button with role="combobox", aria-haspopup="listbox", aria-expanded and aria-controls; name it with aria-label, aria-labelledby or a <label htmlFor={id}>.
• ArrowDown, ArrowUp, Enter and Space open the list. In the list, the arrows move the active option (aria-activedescendant) and skip disabled ones, Home and End jump to the ends, typing letters jumps to a matching label, Enter or Space picks it, and Escape closes the list and returns focus to the trigger. Escape does not close a surrounding floating window.
• A pointer down outside the list closes it.

API

Type SelectOption

One option of a Select.