PrimitiveAvailable

Select

A custom select with typeahead, focus management, and selected-item feedback.

Framework

Loading example…

Installation

Add the component and its dependencies from the registry running on your computer.

terminal

npx shadcn@latest add https://brutallab.facilito.dev/r/select.json

Usage

Import the component into your project and keep the source code under your control.

tsx

'use client';

import { SelectField } from '@/components/ui/select';
import { Label } from '@/components/ui/label';

export default function Demo() {
  return <div className="grid w-64 gap-2">
    <Label htmlFor="framework-select">Framework</Label>
    <SelectField id="framework-select" className="w-full" defaultValue="React"
      options={['React', 'Vue', 'Svelte'].map(value => ({ value, label: value }))} />
  </div>;
}

States & interaction

Appearance, behavior and keyboard checks.

Check closed, open, highlighted, selected and disabled states where supported.
Dialogs and menus must open from the keyboard. Escape closes non-persistent overlays and returns focus to the trigger. Tooltips and hover cards must also appear on focus.
Test the example with Tab and Shift+Tab. Focus must stay visible in both themes.

API Reference

BrutalLab-specific properties. Native attributes are supported as well.

Prop	Type	Default	Description
value	item or null	uncontrolled	Controlled selected value.
onValueChange	function	—	Reports the new selection.
options	readonly { value: string; label: ReactNode; disabled?: boolean }[]	—	SelectField composes the library trigger, popup and items; items provide readable labels before the popup opens.
onValueChange	(value: string) => void	—	Controlled SelectField selection; a cleared selection returns an empty string.
required / name / form	boolean / string / string	false / — / —	Preserves form participation and required-value validation using the Base UI root.

Accessibility

Rules that should remain intact when adapting the component to a product.

Associate the trigger with a label and preserve item selection semantics.

Retain keyboard focus styles and test the composition with keyboard navigation.

Use className for visual customization; preserve the primitive ARIA attributes.

SelectField uses the same keyboard, focus and disabled behavior as the composable Select parts.