Нативный select

Стандартный HTML-элемент «select», переработанный для использования в формах, фильтрах и выбора стран — выпадающий список, отображаемый операционной системой, с границами и тенями в стиле необрутализма.

Стилизованный компонент select — в компоненте Select.

import {
  NativeSelect,
  NativeSelectOption,

Native select — тонкий слой стилей поверх браузерного <select>: без примитива, без portal, без JavaScript. Закрытый контрол получает рецепт необрутализма — толстые рамки, жёсткие тени и жирный шрифт, — а открытый список остаётся системным picker'ом ОС.

Когда это пригодится:

Страна, timezone, валюта — длинные списки опций ОС рисует быстрее любого кастомного popover.
Формы с упором на mobile — iOS и Android подставляют свой native picker wheel, удобнее кастомного dropdown на маленьком экране.
Обычный form post — это настоящий <select name="…">, значение уходит с формой и работает до hydration.

Установка


pnpm dlx shadcn@latest add https://neobrutalism.com/r/base/native-select.json
npx shadcn@latest add https://neobrutalism.com/r/base/native-select.json
yarn dlx shadcn@latest add https://neobrutalism.com/r/base/native-select.json
bunx --bun shadcn@latest add https://neobrutalism.com/r/base/native-select.json

Скопируйте и вставьте следующий код в свой проект.

components/ui/native-select.tsx

import * as React from "react"
import { ChevronDownIcon } from "lucide-react"

import { cn } from "@/lib/utils"

type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
  size?: "sm" | "default"
}

function NativeSelect({
  className,
  size = "default",
  ...props
}: NativeSelectProps) {
  return (
    <div
      className={cn(
        "group/native-select relative w-fit has-[select:disabled]:opacity-50",
        className
      )}
      data-slot="native-select-wrapper"
      data-size={size}
    >
      <select
        data-slot="native-select"
        data-size={size}
        className="h-8 w-full min-w-0 appearance-none rounded border-2 bg-input py-2 pr-8 pl-3 text-sm shadow-sm transition-colors outline-none select-none selection:bg-primary selection:text-primary-foreground placeholder:text-muted-foreground focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary disabled:pointer-events-none disabled:cursor-not-allowed aria-invalid:border-destructive data-[size=sm]:h-7 data-[size=sm]:rounded data-[size=sm]:py-0.5"
        {...props}
      />
      <ChevronDownIcon
        className="pointer-events-none absolute top-1/2 right-2.5 size-4 -translate-y-1/2 text-muted-foreground select-none"
        aria-hidden="true"
        data-slot="native-select-icon"
      />
    </div>
  )
}

function NativeSelectOption({
  className,
  ...props
}: React.ComponentProps<"option">) {
  return (
    <option
      data-slot="native-select-option"
      className={cn("bg-[Canvas] text-[CanvasText]", className)}
      {...props}
    />
  )
}

function NativeSelectOptGroup({
  className,
  ...props
}: React.ComponentProps<"optgroup">) {
  return (
    <optgroup
      data-slot="native-select-optgroup"
      className={cn("bg-[Canvas] text-[CanvasText]", className)}
      {...props}
    />
  )
}

export { NativeSelect, NativeSelectOptGroup, NativeSelectOption }

Обновите пути импорта в соответствии с настройками вашего проекта.

Использование

import {
  NativeSelect,
  NativeSelectOptGroup,
  NativeSelectOption,
} from "@/components/ui/native-select"

<NativeSelect>
  <NativeSelectOption value="">Select a fruit</NativeSelectOption>
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
  <NativeSelectOption value="blueberry">Blueberry</NativeSelectOption>
  <NativeSelectOption value="pineapple">Pineapple</NativeSelectOption>
</NativeSelect>

Композиция

Простой

Параметры, размещённые прямо внутри NativeSelect (без NativeSelectOptGroup).

NativeSelect
├── NativeSelectOption
├── NativeSelectOption
├── NativeSelectOption
└── NativeSelectOption

С группами

Используйте NativeSelectOptGroup, чтобы организовать параметры по категориям.

NativeSelect
├── NativeSelectOptGroup
│   ├── NativeSelectOption
│   └── NativeSelectOption
└── NativeSelectOptGroup
    ├── NativeSelectOption
    └── NativeSelectOption

Примеры

Группы

Используйте NativeSelectOptGroup, чтобы организовать параметры по категориям.

import {
  NativeSelect,
  NativeSelectOptGroup,

Отключённое

Добавьте проп disabled к компоненту NativeSelect, чтобы отключить select.

import {
  NativeSelect,
  NativeSelectOption,

Невалидное

Используйте aria-invalid, чтобы показать ошибки валидации, и атрибут data-invalid на компоненте Field для стилизации.

import {
  NativeSelect,
  NativeSelectOption,

Native Select vs Select

Используйте NativeSelect для нативного поведения браузера, лучшей производительности или оптимизированных для мобильных устройств выпадающих списков.
Используйте Select для кастомной стилизации, анимаций или сложных взаимодействий.

RTL

Чтобы включить поддержку RTL в Neobrutalism, см. руководство по настройке RTL.

"use client"

import * as React from "react"

Доступность

Это платформенный <select>, который браузеры уже отдают ассистивным технологиям — контрол, который select-only combobox-паттерн WAI-ARIA существует, чтобы эмулировать. ARIA-обвязка не нужна; достаточно accessible name через <Label htmlFor> или aria-label.

Поведение клавиатуры даёт браузер, поэтому привязки чуть отличаются между ОС и браузерами. Общий набор:

Клавиша	Действие
`Space` / `Alt + ArrowDown`	Открыть список опций
`ArrowDown` / `ArrowUp`	Подсветить следующую / предыдущую опцию
`Home` / `End`	Перейти к первой / последней опции
`Enter`	Подтвердить подсвеченную опцию и закрыть список
`Escape`	Закрыть список, не меняя значение
Печатные символы	Typeahead — перейти к следующей опции, совпадающей с набором

Справочник API

NativeSelect

Основной компонент select, который оборачивает нативный HTML-элемент select.

<NativeSelect>
  <NativeSelectOption value="option1">Option 1</NativeSelectOption>
  <NativeSelectOption value="option2">Option 2</NativeSelectOption>
</NativeSelect>

NativeSelectOption

Представляет отдельный параметр внутри select.

Prop	Type	Default
`value`	`string`
`disabled`	`boolean`	`false`

NativeSelectOptGroup

Группирует связанные параметры для лучшей организации.

Prop	Type	Default
`label`	`string`
`disabled`	`boolean`	`false`

<NativeSelectOptGroup label="Fruits">
  <NativeSelectOption value="apple">Apple</NativeSelectOption>
  <NativeSelectOption value="banana">Banana</NativeSelectOption>
</NativeSelectOptGroup>