قائمة أصلية

تم إعادة تصميم عنصر الاختيار الأصلي في HTML ليلائم النماذج وعوامل التصفية وأدوات اختيار البلدان — قائمة منسدلة يتم عرضها بواسطة نظام التشغيل مع حدود وظلال على الطراز «النيوبروتاليستي».

للحصول على مكوّن select مُصمّم، راجع مكوّن Select.

import {
  NativeSelect,
  NativeSelectOption,

يُعد عنصر select الأصلي طبقة تصميم رقيقة تُضاف فوق عنصر «<select> element» الخاص بالمتصفح — بدون عناصر أولية، ولا بوابة، ولا جافا سكريبت. ويُطبق على عنصر التحكم المغلق أسلوب «النيوبروتالية» — حدود سميكة، وظلال حادة، وخط عريض — بينما تظل القائمة المفتوحة على شكل أداة الاختيار الخاصة بنظام التشغيل.

استخدمه عندما:

أدوات اختيار البلد والمنطقة الزمنية والعملة — يعرض نظام التشغيل قوائم الخيارات الطويلة بشكل أسرع من أي نافذة منبثقة مخصصة.
النماذج التي تُستخدم بكثرة على الأجهزة المحمولة — يستخدم كل من iOS وAndroid عجلة الاختيار الأصلية الخاصة بهما، والتي تتفوق على القائمة المنسدلة المخصصة على الشاشة الصغيرة.
عمليات إرسال النماذج العادية — إنه <select name="…"> حقيقي، لذا يتم إرسال القيمة مع النموذج وتعمل قبل عملية التعبئة.

التثبيت


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> الخاص بالمنصة، والذي تعرضه المتصفحات بالفعل لتقنيات المساعدة — وهو العنصر الذي تم إنشاء WAI-ARIA select-only combobox pattern لمحاكاته. لا حاجة إلى تكوين ARIA؛ ما عليك سوى تزويده باسم يسهل الوصول إليه عبر <Label htmlFor> أو aria-label.

يتم توفير سلوك لوحة المفاتيح بواسطة المتصفح، لذا تختلف الارتباطات قليلاً باختلاف نظام التشغيل والمتصفح. المجموعة الشائعة:

المفتاح	الإجراء
`Space` / `Alt + ArrowDown`	فتح قائمة الخيارات
`ArrowDown` / `ArrowUp`	تمييز الخيار التالي / السابق
`Home` / `End`	الانتقال إلى الخيار الأول / الأخير
`Enter`	تأكيد الخيار المحدد وإغلاق القائمة
`Escape`	إغلاق القائمة دون تغيير القيمة
الأحرف القابلة للطباعة	الإدخال التلقائي — الانتقال إلى الخيار التالي المطابق لما تكتبه

مرجع 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>