Starting your winter arc? 🥶 Get 25% off every plan and template with
WensityWensity

Native Select

Browser-native option selection for forms, with grouped options, placeholders, inline variants, and error states.

selectnativeformdropdowngroupedplaceholdererrorinline
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
import { NativeSelect } from "@/components/wensity/native-select";


export function NativeSelectGrouped() {
  return (
    <NativeSelect
      groups={[
        {
          label: "Frontend",
          options: [
            { value: "react", label: "React" },
            { value: "vue", label: "Vue" },
          ],
        },
        {
          label: "Backend",
          options: [
            { value: "nextjs", label: "Next.js" },
            { value: "nuxt", label: "Nuxt" },
          ],
        },
      ]}
      label="Framework"
      placeholder="Choose a framework"
    />
  );
}

Disabled

Displays unavailable options and states.

examples/native-select-disabled.tsx
import { NativeSelect } from "@/components/wensity/native-select";


export function NativeSelectDisabled() {
  return (
    <NativeSelect
      options={[
        { value: "free", label: "Free - $0/mo" },
        { value: "pro", label: "Pro - $29/mo" },
        { value: "team", label: "Team - $79/mo", disabled: true },
      ]}
      label="Plan"
      defaultValue="pro"
    />
  );
}

Placeholder

Shows an initial unselected prompt.

examples/native-select-placeholder.tsx
import { NativeSelect } from "@/components/wensity/native-select";


export function NativeSelectPlaceholder() {
  return (
    <NativeSelect
      options={[
        { value: "us", label: "United States" },
        { value: "ca", label: "Canada" },
        { value: "gb", label: "United Kingdom" },
      ]}
      label="Country"
      placeholder="Select your country"
    />
  );
}

Error

Displays invalid selection and validation states.

examples/native-select-error.tsx
import { NativeSelect } from "@/components/wensity/native-select";


export function NativeSelectError() {
  return (
    <NativeSelect
      options={[
        { value: "us", label: "United States" },
        { value: "ca", label: "Canada" },
      ]}
      label="Region"
      placeholder="Select a region"
      error="Please select a valid region."
      required
    />
  );
}

Inline

Compact select for dense interface layouts.

examples/native-select-inline.tsx
import { NativeSelect } from "@/components/wensity/native-select";


export function NativeSelectInline() {
  return (
    <NativeSelect
      options={[
        { value: "10", label: "10 / page" },
        { value: "25", label: "25 / page" },
        { value: "50", label: "50 / page" },
        { value: "100", label: "100 / page" },
      ]}
      selectSize="inline"
      defaultValue="25"
      fullWidth={false}
    />
  );
}

Installation

Run the following command

~/your-project
pnpm dlx wensity@latest add native-select

Usage

Import NativeSelect from @/components/wensity/native-select and render it anywhere in your React or Next.js app. The source lands in your own repo, so every prop, class and animation below is yours to edit.

app/example.tsx
import { NativeSelect } from "@/components/wensity/native-select";


export function NativeSelectDemo() {
  return (
    <NativeSelect
      label="Country"
      placeholder="Select your country"
      defaultValue="us"
      options={[
        { value: "us", label: "United States" },
        { value: "ca", label: "Canada" },
        { value: "gb", label: "United Kingdom" },
      ]}
    />
  );
}

Props

PropTypeDefaultDescription
optionsNativeSelectOption[]-Choices to render as native option elements.
groupsNativeSelectGroup[]-Grouped choices, rendered as native optgroup sections.
placeholderstring-Shown as a disabled first option while nothing is selected.
labelReact.ReactNode-Field label above the control.
hintReact.ReactNode-Helper copy under the control.
errorReact.ReactNode-Error message under the control, with invalid styling applied.
selectSize"sm" | "md" | "lg" | "inline""md"Control height and text size. inline strips the field chrome.
fullWidthbooleantrueStretches the control to fill its container.