Select

A dropdown for choosing a single option from a list, with full keyboard support and typeahead.

When to use

• To pick one value from a known, moderate-length list (roughly 5–15 options).
• When the chosen value matters more than seeing every option at once.

When not to use

• For two states — use a Switch or a checkbox.
• For a handful of always-visible options — use a radio group.
• For very long, searchable lists — use a combobox with filtering.

Installation

pnpm add @nordcom/nordstar-select

import { Select } from '@nordcom/nordstar';

Basic usage

Compose Select with a Select.Trigger (holding a Select.Value) and a Select.Content of Select.Items. Use defaultValue for uncontrolled state.

'use client';

import { Select } from '@nordcom/nordstar';

export default function Example() {
    return (
        <Select defaultValue="apple">
            <Select.Trigger className="w-56">
                <Select.Value placeholder="Pick a fruit" />
            </Select.Trigger>
            <Select.Content>
                <Select.Item value="apple">Apple</Select.Item>
                <Select.Item value="pear">Pear</Select.Item>
                <Select.Item value="orange">Orange</Select.Item>
            </Select.Content>
        </Select>
    );
}

Groups

Organize long lists with Select.Group, Select.Label, and Select.Separator.

'use client';

import { Select } from '@nordcom/nordstar';

export default function Example() {
    return (
        <Select>
            <Select.Trigger className="w-56">
                <Select.Value placeholder="Pick a food" />
            </Select.Trigger>
            <Select.Content>
                <Select.Group>
                    <Select.Label>Fruit</Select.Label>
                    <Select.Item value="apple">Apple</Select.Item>
                    <Select.Item value="pear">Pear</Select.Item>
                </Select.Group>
                <Select.Separator />
                <Select.Group>
                    <Select.Label>Vegetables</Select.Label>
                    <Select.Item value="carrot">Carrot</Select.Item>
                    <Select.Item value="pea">Pea</Select.Item>
                </Select.Group>
            </Select.Content>
        </Select>
    );
}

Controlled

Drive the value yourself with value and onValueChange:

'use client';

import { Select } from '@nordcom/nordstar';
import { useState } from 'react';

export function FruitPicker() {
    const [fruit, setFruit] = useState('apple');
    return (
        <Select value={fruit} onValueChange={setFruit}>
            <Select.Trigger>
                <Select.Value placeholder="Pick a fruit" />
            </Select.Trigger>
            <Select.Content>
                <Select.Item value="apple">Apple</Select.Item>
                <Select.Item value="pear">Pear</Select.Item>
            </Select.Content>
        </Select>
    );
}

Props

Accessibility

• Built on @radix-ui/react-select: arrow keys move between options, typing jumps to a match, and Escape closes the list.
• Integrates with native forms via the name prop on Select.
• The current value is shown in the trigger via Select.Value; provide a placeholder for the empty state.