Inline Select

Usage

// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";

import { useState } from "react";

Anatomy

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

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

<InlineSelect>
  <InlineSelect.Indicator />
  <InlineSelect.Trigger />
  <InlineSelect.Value />
  <InlineSelect.Popover />
</InlineSelect>;

Team Switcher

// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";

import { useState } from "react";

Custom Indicator

// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";

import { useState } from "react";

Multi Select

// @ts-nocheck -- Complex demo data intentionally uses heterogeneous shapes.
"use client";

import { useState } from "react";

Placements

"use client";

import type { Placement } from "react-aria-components";

import { useState } from "react";

CSS Classes

Base Classes

• .inline-select - Root wrapper with custom properties

Element Classes

• .inline-select__trigger - Ghost-styled trigger button (overrides Namespace UIKit Select field styles)
• .inline-select__value - Displayed text of the selected item(s)
• .inline-select__indicator - Inline chevron icon (static positioning instead of absolute)
• .inline-select__popover - Dropdown panel

Interactive States

• Hover: :hover or [data-hovered="true"] on .inline-select__trigger (text color change)
• Focus visible: :focus-visible or [data-focus-visible="true"] on .inline-select__trigger (focus ring)
• Disabled: :disabled or [aria-disabled="true"] on .inline-select__trigger (reduced opacity)
• Open: [data-open="true"] on .inline-select__indicator

CSS Variables

• --inline-select-value-max-width - Max width of the value text (default: 12rem)
• --inline-select-indicator-size - Size of the indicator icon (default: 0.75rem)

API Reference

InlineSelect

The root component. Wraps the Namespace UIKit Select with ghost styling for inline use.

Also supports all Namespace UIKit Select props.

InlineSelect.Trigger

Ghost-styled trigger button.

Also supports all Namespace UIKit Select.Trigger props.

InlineSelect.Value

Displayed text of the selected item(s), truncated.

Also supports all Namespace UIKit Select.Value props.

InlineSelect.Indicator

Chevron icon. Defaults to a ChevronsExpandVertical icon when no children are provided.

Also supports all Namespace UIKit Select.Indicator props.

InlineSelect.Popover

Dropdown panel for selection options.

Also supports all Namespace UIKit Select.Popover props.