Native select

ブラウザー標準のselectを、Inputに合わせてスタイルしたものです。控えめなプレースホルダー、Fieldのサポート、あらゆるデバイスでのOSピッカーを備えています。

Project name

Framework

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"

export function NativeSelectDemo() {
  return (
    <div className="grid w-full max-w-sm gap-4">
      <div className="flex flex-col gap-2">
        <Label htmlFor="native-select-demo-name">Project name</Label>
        <Input id="native-select-demo-name" defaultValue="HextaUI" />
      </div>
      <div className="flex flex-col gap-2">
        <Label htmlFor="native-select-demo-framework">Framework</Label>
        <NativeSelect id="native-select-demo-framework" className="w-full">
          <NativeSelectOption value="">Select a framework</NativeSelectOption>
          <NativeSelectOption value="next">Next.js</NativeSelectOption>
          <NativeSelectOption value="remix">Remix</NativeSelectOption>
          <NativeSelectOption value="astro">Astro</NativeSelectOption>
          <NativeSelectOption value="vite">Vite</NativeSelectOption>
        </NativeSelect>
      </div>
    </div>
  )
}

インストール

pnpm dlx shadcn@latest add https://hextaui.com/r/native-select.json

コンポーネント、HextaUIのテーマトークン、依存するHextaUIコンポーネントを追加します。

まだ追加していない場合は、グローバルCSSにテーマトークンを追加してください。

依存関係をインストールします。

pnpm add @base-ui/react @tabler/icons-react class-variance-authority cn

次のコードをコピーしてプロジェクトに貼り付けてください。

components/ui/native-select.tsx

"use client"

import * as React from "react"
import { Input as InputPrimitive } from "@base-ui/react/input"
import { IconSelector } from "@tabler/icons-react"
import { cn } from "cn"

import { useComposedRef } from "@/hooks/use-composed-ref"

components/ui/input.tsx

"use client"

import * as React from "react"
import { Input as InputPrimitive } from "@base-ui/react/input"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

import { useAutosize } from "@/hooks/use-autosize"

components/ui/number-flow.tsx

"use client"

import * as React from "react"
import { cn } from "cn"

import { easeSpring } from "@/lib/motion"

type NumberFlowTrend = "auto" | "up" | "down" | "shortest"

lib/motion.ts

import * as React from "react"

const easeOut = "cubic-bezier(0.23, 1, 0.32, 1)"
const easeInOut = "cubic-bezier(0.77, 0, 0.175, 1)"
const easeSpring =
  "linear(0, 0.015 2%, 0.0532 4%, 0.1065 6%, 0.1686 8%, 0.2351 10%, 0.3363 13%, 0.4332 16%, 0.5495 20%, 0.648 24%, 0.7287 28%, 0.807 33%, 0.8646 38%, 0.9128 44%, 0.9447 50%, 0.968 57%, 0.9834 65%, 0.9924 74%, 0.9975 85%, 1)"

const duration = {

インポートパスは、お使いのプロジェクト構成に合わせて更新してください。

使い方

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

空の value を持つ option はプレースホルダーとして働き、何かが選ばれるまで淡い色のテキストで表示されます。ラッパーのサイズを決めるには select に className を指定します(例: w-full)。

コンポジション

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

例

グループ

<NativeSelectOptGroup /> は、OS のピッカー内で選択肢を見出しの下にまとめます。

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

export function NativeSelectGroups() {
  return (
    <NativeSelect aria-label="Department">
      <NativeSelectOption value="">Select department</NativeSelectOption>
      <NativeSelectOptGroup label="Engineering">
        <NativeSelectOption value="frontend">Frontend</NativeSelectOption>
        <NativeSelectOption value="backend">Backend</NativeSelectOption>
        <NativeSelectOption value="devops">DevOps</NativeSelectOption>
      </NativeSelectOptGroup>
      <NativeSelectOptGroup label="Design">
        <NativeSelectOption value="product">Product design</NativeSelectOption>
        <NativeSelectOption value="brand">Brand</NativeSelectOption>
      </NativeSelectOptGroup>
      <NativeSelectOptGroup label="Operations">
        <NativeSelectOption value="support">
          Customer support
        </NativeSelectOption>
        <NativeSelectOption value="people">People</NativeSelectOption>
      </NativeSelectOptGroup>
    </NativeSelect>
  )
}

サイズ

サイズ、境界線、フォーカスリング、無効時のスタイルは Input と完全に一致するため、並べたときに揃います。

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

const sizes = ["sm", "default", "lg"] as const

export function NativeSelectSizes() {
  return (
    <div className="flex w-full max-w-md flex-col gap-3">
      {sizes.map((size) => (
        <div key={size} className="flex gap-2">
          <Input
            size={size}
            placeholder={`Input ${size}`}
            aria-label={`Input ${size}`}
          />
          <NativeSelect size={size} aria-label={`Select ${size}`}>
            <NativeSelectOption value="">{size}</NativeSelectOption>
            <NativeSelectOption value="a">Option A</NativeSelectOption>
          </NativeSelect>
        </div>
      ))}
    </div>
  )
}

Field

<Field /> の中では、ラベルと説明が自動で結び付けられ、値の変化に応じてエラーが表示されます。プランを選ばずに送信すると、select が赤くなって一度揺れ、ブラウザーがそこを示します。

"use client"

import { Form } from "@base-ui/react/form"

import { Button } from "@/components/ui/button"
import {
  Field,
  FieldDescription,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"

export function NativeSelectField() {
  return (
    <Form
      className="flex w-full max-w-sm flex-col gap-4"
      onSubmit={(event) => event.preventDefault()}
    >
      <Field validationMode="onChange">
        <FieldLabel>Plan</FieldLabel>
        <NativeSelect name="plan" required className="w-full">
          <NativeSelectOption value="">Choose a plan</NativeSelectOption>
          <NativeSelectOption value="hobby">Hobby</NativeSelectOption>
          <NativeSelectOption value="pro">Pro</NativeSelectOption>
          <NativeSelectOption value="team">Team</NativeSelectOption>
        </NativeSelect>
        <FieldDescription>You can change this later.</FieldDescription>
        <FieldError match="valueMissing">Choose a plan to continue.</FieldError>
      </Field>
      <Button type="submit" className="self-start">
        Continue
      </Button>
    </Form>
  )
}

無効な値

aria-invalid を設定し、aria-describedby でメッセージを関連付けます。

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

export function NativeSelectInvalid() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <NativeSelect
        aria-label="Country"
        aria-invalid
        aria-describedby="native-select-invalid-message"
        className="w-full"
      >
        <NativeSelectOption value="">Select a country</NativeSelectOption>
        <NativeSelectOption value="in">India</NativeSelectOption>
        <NativeSelectOption value="de">Germany</NativeSelectOption>
      </NativeSelect>
      <p
        id="native-select-invalid-message"
        className="text-sm text-destructive"
      >
        We don&apos;t ship to the selected region yet.
      </p>
    </div>
  )
}

無効

select 全体、または利用できない個別の option を無効にします。

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

export function NativeSelectDisabled() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <NativeSelect aria-label="Region" disabled defaultValue="eu">
        <NativeSelectOption value="us">United States</NativeSelectOption>
        <NativeSelectOption value="eu">Europe</NativeSelectOption>
      </NativeSelect>
      <NativeSelect aria-label="Plan" defaultValue="pro">
        <NativeSelectOption value="hobby">Hobby</NativeSelectOption>
        <NativeSelectOption value="pro">Pro</NativeSelectOption>
        <NativeSelectOption value="enterprise" disabled>
          Enterprise (contact sales)
        </NativeSelectOption>
      </NativeSelect>
    </div>
  )
}

制御

通常の select と同様に value と onChange を渡します。

"use client"

import * as React from "react"

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

const zones = [
  { value: "America/New_York", label: "New York" },
  { value: "Europe/London", label: "London" },
  { value: "Asia/Kolkata", label: "Kolkata" },
  { value: "Asia/Tokyo", label: "Tokyo" },
]

export function NativeSelectControlled() {
  const [zone, setZone] = React.useState("Asia/Kolkata")
  const time = new Intl.DateTimeFormat("en-US", {
    hour: "numeric",
    minute: "2-digit",
    timeZone: zone,
  }).format(new Date(Date.UTC(2026, 9, 4, 9, 0)))

  return (
    <div className="flex flex-col items-start gap-2">
      <NativeSelect
        aria-label="Time zone"
        value={zone}
        onChange={(event) => setZone(event.target.value)}
      >
        {zones.map((option) => (
          <NativeSelectOption key={option.value} value={option.value}>
            {option.label}
          </NativeSelectOption>
        ))}
      </NativeSelect>
      <p className="text-sm text-muted-foreground">
        09:00 UTC is {time} there.
      </p>
    </div>
  )
}

長いコンテンツ

選択されたラベルが長い場合は、シェブロンの下に潜り込まず、末尾が省略記号になります。

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

export function NativeSelectLongContent() {
  return (
    <div className="w-56 max-w-full">
      <NativeSelect
        aria-label="Billing account"
        defaultValue="long"
        className="w-full"
      >
        <NativeSelectOption value="short">Personal</NativeSelectOption>
        <NativeSelectOption value="long">
          The International Subsidiary Billing Account for Europe and Asia
        </NativeSelectOption>
      </NativeSelect>
    </div>
  )
}

右から左

シェブロンとパディングが反対側に移ります。

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

export function NativeSelectRtl() {
  return (
    <div dir="rtl">
      <NativeSelect aria-label="اللغة">
        <NativeSelectOption value="">اختر لغة</NativeSelectOption>
        <NativeSelectOption value="ar">العربية</NativeSelectOption>
        <NativeSelectOption value="en">الإنجليزية</NativeSelectOption>
        <NativeSelectOption value="fr">الفرنسية</NativeSelectOption>
      </NativeSelect>
    </div>
  )
}

Native select と Select のどちらを使うか

単純なリストには Native select を使います。特にスマートフォンでは、OS のピッカーが最も速く、慣れた選択方法です。
ユーザーが検索する必要がある場合や、選択肢にアイコン、説明、カスタムレイアウトが必要な場合は Combobox を使います。

キーボード

キー	アクション
`Tab`	select にフォーカスします。
`SpaceEnter`	OS のピッカーを開きます。
`↑↓`	選択を変更するか、開いたピッカー内を移動します。
`A–Z`	入力したテキストで始まる option にジャンプします。

APIリファレンス

<NativeSelect /> はすべての select 属性を受け付けます。option のパーツは、それぞれの要素の属性を受け付けます。

NativeSelect

プロパティ	型	デフォルト
`size`	`"sm" \| "default" \| "lg"`	`"default"`
`htmlSize`ネイティブの size 属性。size は variant に使われているため、名前を変えています。	`number`	`–`
`shake`フォーム送信で無効と判定されたときに一度揺れます。	`boolean`	`true`
`className`ラッパーに適用されるため、コントロール全体のサイズを決めます。	`string`	`–`
`value`	`string`	`–`
`defaultValue`	`string`	`–`
`disabled`	`boolean`	`false`
`required`	`boolean`	`false`

属性	説明
`data-slot="native-select-wrapper"`	ラッパー。data-size を持ちます。
`data-slot="native-select"`	select 要素。
`data-slot="native-select-icon"`	シェブロン。ホバーとフォーカスで濃くなります。
`data-invalid`	周囲の Field が無効(invalid)なときに付きます。

NativeSelectOption と NativeSelectOptGroup

属性	説明
`data-slot="native-select-option"`	選択肢。
`data-slot="native-select-optgroup"`	ラベル付きの選択肢グループ。

使用しているブロック

Native select の上に構築されるブロック。

Voice Modeアシスタントと話せます。曇り空やフェロフルイドの塊から、ディザリングされたピクセル、ASCII、CRTの惑星、ハーフトーンのドット、1つのリング、やわらかなオーラまで、音に反応する8つのスタイルと、4つのリアクティブなドットを備えています。ミュート、割り込み、字幕に対応した全画面セッション、チャット内の音声ピル、音声ピッカー、聞き取り、話し終えるのを待って返答するブラウザーエンジンも含みます。