PrimitiveAvailable

Native Select

A styled native select that keeps platform keyboard and touch behavior.

Language

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/native-select.json

Usage

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

tsx

'use client';

import {
  NativeSelect,
  NativeSelectOption,
} from '@/components/ui/native-select';
import { Label } from '@/components/ui/label';

export default function Demo() {
  return (
    <div className="grid w-full max-w-sm gap-2">
      <Label htmlFor="language">Language</Label>
      <NativeSelect id="language" defaultValue="en">
        <NativeSelectOption value="en">English</NativeSelectOption>
        <NativeSelectOption value="es">Español</NativeSelectOption>
        <NativeSelectOption value="fr">Français</NativeSelectOption>
      </NativeSelect>
    </div>
  );
}

States & interaction

Appearance, behavior and keyboard checks.

Rest, filled, focus, invalid and disabled. Invalid fields use aria-invalid and an associated message, not color alone.
Hover never validates a field. The application decides when to show errors.
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
defaultValue	string	—	Initial selected option.
disabled	boolean	false	Disables the native select.

Accessibility

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

Keep visible text labels and the semantic HTML shown in the example.

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

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