(selector)
if (trigger === current) {
if (trigger) {
place(trigger, true)
}
return
}
const appearing = current === null
current = trigger
if (!trigger) {
highlight.removeAttribute("data-visible")
return
}
place(trigger, appearing)
if (appearing) {
void highlight.offsetWidth
}
highlight.setAttribute("data-visible", "")
}
sync()
const mutations = new MutationObserver(sync)
mutations.observe(bar, {
subtree: true,
childList: true,
attributes: true,
attributeFilter: [attribute],
})
const resize =
typeof ResizeObserver === "undefined"
? null
: new ResizeObserver(() => {
if (current) {
place(current, true)
}
})
resize?.observe(bar)
const onScroll = () => {
if (current) {
place(current, true)
}
}
bar.addEventListener("scroll", onScroll, { capture: true, passive: true })
return () => {
mutations.disconnect()
resize?.disconnect()
bar.removeEventListener("scroll", onScroll, { capture: true })
}
}, [barRef, highlightRef, selector, attribute])
}
export {
duration,
easeInOut,
easeOut,
easeSpring,
prefersReducedMotion,
useSizeMorph,
useSlidingHighlight,
}
export type { SizeMorphOptions }
```
Update the import paths to match your project setup.
## Usage
```tsx
import {
NativeSelect,
NativeSelectOptGroup,
NativeSelectOption,
} from "@/components/ui/native-select"
```
```tsx
Select a fruit
Apple
Banana
```
An option with an empty `value` acts as the placeholder: it shows in muted text until something is chosen. Put `className` on the select to size its wrapper, for example `w-full`.
## Composition
```text
NativeSelect
├── NativeSelectOption
└── NativeSelectOptGroup
└── NativeSelectOption
```
## Examples
### Groups
`
Select department
Frontend
Backend
DevOps
Product design
Brand
Customer support
People
)
}
```
### Sizes
Sizes, borders, focus rings and invalid styles match Input exactly, so the two line up in a row.
```tsx title="components/examples/native-select/sizes.tsx"
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 (
{sizes.map((size) => (
{size}
Option A
))}
Select a country
India
Germany
We don't ship to the selected region yet.
)
}
```
### Disabled
Disable the whole select, or single options that aren't available.
```tsx title="components/examples/native-select/disabled.tsx"
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
export function NativeSelectDisabled() {
return (
United States
Europe
Hobby
Pro
Enterprise (contact sales)
)
}
```
### Controlled
Pass `value` and `onChange` like a regular select.
```tsx title="components/examples/native-select/controlled.tsx"
"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 (
setZone(event.target.value)}
>
{zones.map((option) => (
{option.label}
))}
09:00 UTC is {time} there.
)
}
```
### Long content
Long selected labels end with an ellipsis instead of running under the chevron.
```tsx title="components/examples/native-select/long-content.tsx"
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
export function NativeSelectLongContent() {
return (
Personal
The International Subsidiary Billing Account for Europe and Asia
)
}
```
### Right to left
The chevron and padding move to the other side.
```tsx title="components/examples/native-select/rtl.tsx"
import { NativeSelect, NativeSelectOption } from "@/components/ui/native-select"
export function NativeSelectRtl() {
return (
اختر لغة
العربية
الإنجليزية
الفرنسية
)
}
```
## Native select or Select?
- Use Native select for simple lists, especially on phones, where the OS picker is the fastest and most familiar way to choose.
- Use Combobox when people need to search, or when options need icons, descriptions or custom layouts.
## Keyboard
| Key | Action |
| --- | --- |
| `Tab` | Focuses the select. |
| `Space` `Enter` | Opens the OS picker. |
| `↑` `↓` | Changes the selection, or moves in the open picker. |
| `A–Z` | Jumps to the option that starts with the typed text. |
## API reference
`.json`. It adds the source, the HextaUI theme tokens and any HextaUI components it depends on. `https://hextaui.com/r/all.json` installs every component.
- The code is then owned by the project, like shadcn/ui. There is no HextaUI npm package. HextaUI is MIT licensed and free for personal and commercial use.
- Behavior and accessibility come from Base UI (`@base-ui/react`). Compose with the `render` prop, not `asChild`.
- Styling uses Tailwind CSS v4 with theme tokens. Merge classes with `cn` from the `cn` package.
- Icons come from `@tabler/icons-react`.
- Import components from `@/components/ui/`, hooks from `@/hooks/` and utilities from `@/lib/`.
Every HextaUI doc: https://hextaui.com/llms.txt