# Inline Select
**Category**: react
**URL**: https://ui.darkcode.dev/en/docs/react/components/inline-select
**Source**: https://raw.githubusercontent.com/DarkCode-Developers/darkcode-ui/refs/heads/main/apps/docs/content/docs/en/react/components/(forms)/inline-select.mdx
> A minimal inline dropdown that blends into surrounding text for contextual selections without a full form field
***
## Import
```tsx
import { InlineSelect } from '@darkcode-ui/react';
```
### Usage
```tsx
"use client";
import {InlineSelect, ListBox} from "@darkcode-ui/react";
export function InlineSelectDefault() {
return (
Show me results from the past{" "}
24 hours
7 days
30 days
90 days
{" "}
across all projects.
);
}
```
### Anatomy
Import the InlineSelect component and access all parts using dot notation.
```tsx
import { InlineSelect, ListBox } from '@darkcode-ui/react';
export default () => (
7 days
)
```
InlineSelect is a ghost-styled wrapper around the DarkCode UI [Select](/docs/react/components/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.
```tsx
"use client";
import {InlineSelect, ListBox} from "@darkcode-ui/react";
const Options = () => (
24 hours
7 days
30 days
);
export function InlineSelectSizes() {
return (
{(["sm", "md", "lg"] as const).map((size) => (
))}
);
}
```
### 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).
```tsx
"use client";
import {InlineSelect, ListBox} from "@darkcode-ui/react";
const Options = () => (
24 hours
7 days
30 days
);
export function InlineSelectEmphasis() {
return (
{(["default", "muted", "accent"] as const).map((variant) => (
Show the last{" "}
{" "}
of activity.
))}
);
}
```
### Team Switcher
```tsx
"use client";
import {Avatar, AvatarFallback, InlineSelect, ListBox} from "@darkcode-ui/react";
const teams = [
{id: "acme", initials: "AC", name: "Acme Inc."},
{id: "globex", initials: "GX", name: "Globex Corp."},
{id: "umbrella", initials: "UM", name: "Umbrella LLC"},
];
export function InlineSelectTeamSwitcher() {
return (
AC
{teams.map((team) => (
{team.initials}
{team.name}
))}
);
}
```
### Custom Indicator
Pass children to `InlineSelect.Indicator` to replace the default `ChevronsExpandVertical` icon.
```tsx
"use client";
import {InlineSelect, ListBox} from "@darkcode-ui/react";
import {ChevronDown} from "@gravity-ui/icons";
export function InlineSelectCustomIndicator() {
return (
Newest first
Oldest first
Most popular
);
}
```
### Multi Select
Set `selectionMode="multiple"` on both the root and the `ListBox` to allow multiple selections.
```tsx
"use client";
import {InlineSelect, ListBox} from "@darkcode-ui/react";
export function InlineSelectMultiSelect() {
return (
Design
Engineering
Marketing
Sales
);
}
```
### Loading
Pass `isLoading` to swap the indicator for a spinner while options load (e.g. with an async list).
```tsx
"use client";
import {InlineSelect, ListBox} from "@darkcode-ui/react";
export function InlineSelectLoading() {
return (
Acme
Globex
);
}
```
### Placements
Control where the dropdown opens with the `placement` prop on `InlineSelect.Popover`
(defaults to `bottom end`).
```tsx
"use client";
import {InlineSelect, ListBox} from "@darkcode-ui/react";
const placements = ["bottom start", "bottom end", "top start", "top end"] as const;
export function InlineSelectPlacements() {
return (
{placements.map((placement) => (
{placement} · One
{placement} · Two
))}
);
}
```
## Styling
### Customizing the component classes
To customize the InlineSelect component classes, you can use the `@layer components` directive.
[Learn more](https://tailwindcss.com/docs/adding-custom-styles#adding-component-classes).
```css
@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](https://getbem.com/) 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](https://github.com/DarkCode-Developers/darkcode-ui/blob/main/packages/styles/components/inline-select.css)):
#### 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](/docs/react/components/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](/docs/react/components/select) props (`isDisabled`, `isInvalid`, `selectionMode`, etc.).
### InlineSelect.Trigger
Ghost-styled trigger button. Also supports all DarkCode UI `Select.Trigger` props.
### InlineSelect.Value
Displayed text of the selected item(s), truncated. Also supports all DarkCode UI `Select.Value` props.
### InlineSelect.Indicator
Chevron icon. Defaults to a `ChevronsExpandVertical` icon when no children are provided.
| 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 `