Нативний select

Вбудований HTML-елемент «select», перероблений для форм, фільтрів та вибору країни — випадаюче меню, що відображається операційною системою, з необруталістичними рамками та тінями.

Щоб отримати стилізований компонент select, перегляньте компонент Select.

import {
  NativeSelect,
  NativeSelectOption,

Native select — тонкий шар стилів над власним браузерним <select>: без примітиву, без portal, без JavaScript. Закритий контроль отримує рецепт необруталізму — товсті рамки, різкі тіні та масивний шрифт — а відкритий список лишається системним пікером ОС.

Коли це стане в пригоді:

Вибір країни, часового поясу та валюти — довгі списки опцій ОС рендерить швидше за будь-який кастомний popover.
Форми з акцентом на mobile — iOS і Android підставляють нативне колесо пікера, зручніше за кастомний dropdown на малому екрані.
Звичайні 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-обв’язка не потрібна; лише дайте доступне ім’я через <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>