Native Select

Usage

"use client";

import { NativeSelect } from "@thenamespace/uikit";

const statuses = [

Anatomy

Import the NativeSelect component and access all parts using dot notation.

import { NativeSelect } from "@thenamespace/uikit";

<NativeSelect>
  <NativeSelect.Trigger>
    <NativeSelect.Indicator />
  </NativeSelect.Trigger>
  <NativeSelect.OptGroup>
    <NativeSelect.Option />
  </NativeSelect.OptGroup>
</NativeSelect>;

Controlled

"use client";

import { useState } from "react";

import { NativeSelect } from "@thenamespace/uikit";

Custom Indicator

"use client";

import { UnfoldMoreIcon } from "@thenamespace/uikit/icons";
import { HugeiconsIcon } from "@thenamespace/uikit/icons";
import { NativeSelect } from "@thenamespace/uikit";

Disabled Select

"use client";

import { NativeSelect } from "@thenamespace/uikit";
import { Label } from "@thenamespace/uikit/label";

Form Example

"use client";

import { useState } from "react";

import { NativeSelect } from "@thenamespace/uikit";

Full Width

"use client";

import { NativeSelect } from "@thenamespace/uikit";
import { Description } from "@thenamespace/uikit/description";
import { Label } from "@thenamespace/uikit/label";

Invalid State

"use client";

import { NativeSelect } from "@thenamespace/uikit";
import { FieldError } from "@thenamespace/uikit/field-error";
import { Label } from "@thenamespace/uikit/label";

Variants

"use client";

import { NativeSelect } from "@thenamespace/uikit";

const statuses = [

With Description

"use client";

import { NativeSelect } from "@thenamespace/uikit";
import { Description } from "@thenamespace/uikit/description";
import { Label } from "@thenamespace/uikit/label";

With Disabled Options

"use client";

import { NativeSelect } from "@thenamespace/uikit";
import { Label } from "@thenamespace/uikit/label";

With Groups

"use client";

import { NativeSelect } from "@thenamespace/uikit";

export const DemoWithGroupsExample = () => (

With Label

"use client";

import { NativeSelect } from "@thenamespace/uikit";
import { Description } from "@thenamespace/uikit/description";
import { Label } from "@thenamespace/uikit/label";

CSS Classes

Base Classes

• .native-select - Base outer wrapper (label + trigger + description)
• .native-select__trigger - Positioned wrapper containing the select and indicator
• .native-select__select - The native select element with field styling
• .native-select__indicator - Chevron icon positioned inside the trigger

Variant Classes

• .native-select--secondary - Secondary variant with default background and no shadow

Modifier Classes

• .native-select--full-width - Makes the wrapper full-width
• .native-select__trigger--full-width - Makes the trigger full-width

Interactive States

• Hover: :hover or [data-hovered="true"] on .native-select__select (background and border change)
• Focus: :focus on .native-select__select (border and background change)
• Focus visible: :focus-visible or [data-focus-visible="true"] on .native-select__select (focus ring)
• Invalid: [data-invalid="true"] or [aria-invalid="true"] on .native-select (error styling)
• Disabled: :disabled or [aria-disabled="true"] on .native-select__select (reduced opacity, no pointer events)

API Reference

NativeSelect

The root component. Wraps the trigger, label, and description.

Also supports all native div HTML attributes.

NativeSelect.Trigger

Wrapper containing the native select element and the indicator.

Also supports all native select HTML attributes (value, onChange, disabled, etc.).

NativeSelect.Indicator

Chevron icon inside the trigger. Renders a default down-chevron SVG when no children are provided.

Also supports all native span HTML attributes.

NativeSelect.Option

A native option element.

Also supports all native option HTML attributes (value, disabled, etc.).

NativeSelect.OptGroup

A native optgroup element for grouping options.

Also supports all native optgroup HTML attributes (label, disabled, etc.).