Import

import { InlineSelect } from '@darkcode-ui/react';

Usage

"use client";

import {InlineSelect, ListBox} from "@darkcode-ui/react";

export function InlineSelectDefault() {

Anatomy

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

import { InlineSelect, ListBox } from '@darkcode-ui/react';

export default () => (
  <InlineSelect defaultSelectedKey="7d" aria-label="Time range">
    <InlineSelect.Trigger>
      <InlineSelect.Value />
      <InlineSelect.Indicator />
    </InlineSelect.Trigger>
    <InlineSelect.Popover>
      <ListBox>
        <ListBox.Item id="7d" textValue="7 days">
          7 days
          <ListBox.ItemIndicator />
        </ListBox.Item>
      </ListBox>
    </InlineSelect.Popover>
  </InlineSelect>
)

InlineSelect is a ghost-styled wrapper around the DarkCode UI Select. It inherits all of Select's props and accessibility behavior — only the visual styling changes so it blends into surrounding text.

Sizes

Use the size prop (sm, md, lg) to scale the text, indicator, padding, and value width.

"use client";

import {InlineSelect, ListBox} from "@darkcode-ui/react";

const Options = () => (

Emphasis

Use the variant prop to control how the trigger reads inline: default (foreground), muted (subtle, brightening on hover), or accent (a colored, link-like control).

"use client";

import {InlineSelect, ListBox} from "@darkcode-ui/react";

const Options = () => (

Team Switcher

"use client";

import {Avatar, AvatarFallback, InlineSelect, ListBox} from "@darkcode-ui/react";

const teams = [

Custom Indicator

Pass children to InlineSelect.Indicator to replace the default ChevronsExpandVertical icon.

"use client";

import {InlineSelect, ListBox} from "@darkcode-ui/react";
import {ChevronDown} from "@gravity-ui/icons";

Multi Select

Set selectionMode="multiple" on both the root and the ListBox to allow multiple selections.

"use client";

import {InlineSelect, ListBox} from "@darkcode-ui/react";

export function InlineSelectMultiSelect() {

Loading

Pass isLoading to swap the indicator for a spinner while options load (e.g. with an async list).

"use client";

import {InlineSelect, ListBox} from "@darkcode-ui/react";

export function InlineSelectLoading() {

Placements

Control where the dropdown opens with the placement prop on InlineSelect.Popover (defaults to bottom end).

"use client";

import {InlineSelect, ListBox} from "@darkcode-ui/react";

const placements = ["bottom start", "bottom end", "top start", "top end"] as const;

Styling

Customizing the component classes

To customize the InlineSelect component classes, you can use the @layer components directive.
Learn more.

@layer components {
  .inline-select {
    --inline-select-value-max-width: 16rem;
    --inline-select-indicator-size: 0.875rem;
  }

  .inline-select__trigger {
    @apply font-semibold;
  }
}

DarkCode UI follows the BEM methodology to ensure component variants and states are reusable and easy to customize.

CSS Classes

The InlineSelect component uses these CSS classes (View source styles):

Base & Variant Classes

.inline-select - Root wrapper with custom properties
.inline-select--sm|lg - Size variants (md is the default and lives in the base)
.inline-select--default|muted|accent - Emphasis variants (set the trigger text color)
.inline-select__trigger - Ghost-styled trigger button (overrides 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)
Invalid: [data-invalid="true"] or [aria-invalid="true"] on .inline-select (danger text)
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)
--inline-select-fg / --inline-select-fg-hover - Trigger text color (set by the emphasis variants)

API Reference

InlineSelect

The root component. Wraps the DarkCode UI Select with ghost styling for inline use.

Prop	Type	Default	Description
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Scales the text, indicator, padding, and value width.
`variant`	`"default" \| "muted" \| "accent"`	`"default"`	Emphasis of the trigger text.
`isLoading`	`boolean`	`false`	Show a spinner in place of the indicator while options load.
`children`	`ReactNode`	-	Trigger, Value, Indicator, Popover, and list items

Also supports all DarkCode UI Select props (isDisabled, isInvalid, selectionMode, etc.).

Prop	Type	Default	Description
`children`	`ReactNode`	-	Custom indicator icon

Also supports all DarkCode UI Select.Indicator props.

InlineSelect.Popover

Dropdown panel for selection options.

Prop	Type	Default	Description
`placement`	`Placement`	`'bottom end'`	Popover placement relative to the trigger

Also supports all DarkCode UI Select.Popover props.

Accessibility

InlineSelect is built on the DarkCode UI Select (React Aria Components Select), so it provides:

Full keyboard navigation and type-ahead
Correct ARIA roles and aria-expanded / aria-current wiring
Screen reader announcements for the selected value
Always provide an aria-label (or associate a <Label>) since inline selects rarely have a visible field label

Inline Select