Native Select

A browser-native <select> for forms with grouped options, placeholder, error, and inline variants.

select native form dropdown grouped placeholder error inline

Loading preview...

Examples

Practical examples and common states for the same installable component.

Grouped

Organizes related options into labeled groups.

examples/native-select-grouped.tsx

 1import { NativeSelect } from "@/components/wensity/native-select";
 2
 3export function NativeSelectGrouped() {
 4  return (
 5    <NativeSelect
 6      groups={[
 7        {
 8          label: "Frontend",
 9          options: [
10            { value: "react", label: "React" },
11            { value: "vue", label: "Vue" },
12          ],
13        },
14        {
15          label: "Backend",
16          options: [
17            { value: "nextjs", label: "Next.js" },
18            { value: "nuxt", label: "Nuxt" },
19          ],
20        },
21      ]}
22      label="Framework"
23      placeholder="Choose a framework"
24    />
25  );
26}

Disabled

Displays unavailable options and states.

examples/native-select-disabled.tsx

 1import { NativeSelect } from "@/components/wensity/native-select";
 2
 3export function NativeSelectDisabled() {
 4  return (
 5    <NativeSelect
 6      options={[
 7        { value: "free", label: "Free — $0/mo" },
 8        { value: "pro", label: "Pro — $29/mo" },
 9        { value: "team", label: "Team — $79/mo", disabled: true },
10      ]}
11      label="Plan"
12      defaultValue="pro"
13    />
14  );
15}

Placeholder

Shows an initial unselected prompt.

examples/native-select-placeholder.tsx

 1import { NativeSelect } from "@/components/wensity/native-select";
 2
 3export function NativeSelectPlaceholder() {
 4  return (
 5    <NativeSelect
 6      options={[
 7        { value: "us", label: "United States" },
 8        { value: "ca", label: "Canada" },
 9        { value: "gb", label: "United Kingdom" },
10      ]}
11      label="Country"
12      placeholder="Select your country"
13    />
14  );
15}

Error

Displays invalid selection and validation states.

examples/native-select-error.tsx

 1import { NativeSelect } from "@/components/wensity/native-select";
 2
 3export function NativeSelectError() {
 4  return (
 5    <NativeSelect
 6      options={[
 7        { value: "us", label: "United States" },
 8        { value: "ca", label: "Canada" },
 9      ]}
10      label="Region"
11      placeholder="Select a region"
12      error="Please select a valid region."
13      required
14    />
15  );
16}

Inline

Compact select for dense interface layouts.

examples/native-select-inline.tsx

 1import { NativeSelect } from "@/components/wensity/native-select";
 2
 3export function NativeSelectInline() {
 4  return (
 5    <NativeSelect
 6      options={[
 7        { value: "10", label: "10 / page" },
 8        { value: "25", label: "25 / page" },
 9        { value: "50", label: "50 / page" },
10        { value: "100", label: "100 / page" },
11      ]}
12      selectSize="inline"
13      defaultValue="25"
14      fullWidth={false}
15    />
16  );
17}