Native Select
A native select with the same field chrome as other inputs.
Preview
Loading...
import {
NativeSelect,
NativeSelectGroup,
NativeSelectOption,
} from "@/components/ui/NativeSelect";
export function NativeSelectDemo() {
return (
<NativeSelect aria-label="Meal" defaultValue="breakfast">
<NativeSelectGroup label="Day">
<NativeSelectOption value="breakfast">Breakfast</NativeSelectOption>
<NativeSelectOption value="lunch">Lunch</NativeSelectOption>
<NativeSelectOption value="dinner">Dinner</NativeSelectOption>
</NativeSelectGroup>
</NativeSelect>
);
}Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/native-selectManual
Install the following dependencies:
pnpm install @radix-ui/react-iconsCopy and paste the class names utility into your utils/class-names.ts file.
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the NativeSelect component into your components/ui/NativeSelect.tsx file.
"use client";
/**
* @description A native select. The closed control uses the same field chrome as other inputs.
*/
import * as React from "react";
import { ChevronDownIcon } from "@radix-ui/react-icons";
import { cn } from "@/utils/class-names";
function NativeSelect({
className,
children,
...props
}: React.ComponentProps<"select">) {
return (
<div data-slot="native-select" className="relative w-full">
<select className={cn("w-full pe-4", className)} {...props}>
{children}
</select>
<span className="pointer-events-none absolute inset-y-0 end-1 flex items-center">
<ChevronDownIcon className="icon" aria-hidden />
</span>
</div>
);
}
function NativeSelectGroup(props: React.ComponentProps<"optgroup">) {
return <optgroup data-slot="native-select-group" {...props} />;
}
function NativeSelectOption(props: React.ComponentProps<"option">) {
return <option data-slot="native-select-option" {...props} />;
}
export { NativeSelect, NativeSelectGroup, NativeSelectOption };