انتخاب بومی

انتخابگر بومی HTML که برای فرم‌ها، فیلترها و انتخابگرهای کشور بازطراحی شده است — منوی کشویی رندر شده توسط سیستم‌عامل با مرزها و سایه‌های نئوبروتالیست.

برای یک کامپوننت select با استایل، کامپوننت Select را ببینید.

import {
  NativeSelect,
  NativeSelectOption,

Native select یک لایهٔ استایل نازک روی خودِ <select> مرورگر است — بدون primitive، بدون portal، بدون JavaScript. کنترل بسته‌شده دستور پخت نئوبروتالیستی را می‌گیرد — حاشیه‌های ضخیم، سایه‌های سخت و تایپوگرافی پررنگ — در حالی که فهرست باز همان picker سیستم‌عامل می‌ماند.

برای این موارد از آن استفاده کنید:

انتخابگر کشور، timezone و ارز — فهرست‌های بلند گزینه که OS سریع‌تر از هر popover سفارشی رندر می‌کند.
فرم‌های موبایل‌محور — iOS و Android چرخ picker بومی‌شان را می‌آورند که روی صفحهٔ کوچک از dropdown سفارشی بهتر است.
Post سادهٔ فرم — یک <select name="…"> واقعی است، پس مقدار با فرم submit می‌شود و قبل از 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 را مطابق با پیکربندی پروژهٔ خود به‌روزرسانی کنید.

استفاده

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,

غیرفعال

برای غیرفعال کردن select، ویژگی disabled را به کامپوننت NativeSelect اضافه کنید.

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> پلتفرم است که مرورگرها از قبل به فناوری کمکی نمایش می‌دهند — کنترلی که الگوی WAI-ARIA select-only combobox برای تقلیدش وجود دارد. به سیم‌کشی ARIA نیاز نیست؛ فقط از طریق <Label htmlFor> یا aria-label نام دسترس‌پذیر بدهید.

رفتار صفحه‌کلید را مرورگر می‌دهد، پس bindingها کمی بین OS و مرورگر فرق می‌کنند. مجموعهٔ رایج:

کلید	عمل
`Space` / `Alt + ArrowDown`	باز کردن فهرست گزینه‌ها
`ArrowDown` / `ArrowUp`	highlight گزینهٔ بعدی / قبلی
`Home` / `End`	پرش به اولین / آخرین گزینه
`Enter`	commit گزینهٔ highlight‌شده و بستن فهرست
`Escape`	بستن فهرست بدون تغییر مقدار
نویسه‌های قابل‌چاپ	Typeahead — پرش به گزینهٔ بعدی منطبق با آنچه تایپ می‌کنید

مرجع API

NativeSelect

کامپوننت اصلی select که عنصر select بومی HTML را در بر می‌گیرد.

<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>