Cell Select

Import

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

Usage

"use client";

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

const languages = [

Anatomy

Import the CellSelect component and access all parts using dot notation. A simple one-line cell only needs Label, Value, and Indicator inside the Trigger. The optional Icon, Content, and Description parts build a richer, two-line settings row, and Group fuses multiple cells into one panel.

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

export default () => (
  <CellSelect>
    <CellSelect.Trigger>
      <CellSelect.Icon />
      <CellSelect.Content>
        <CellSelect.Label />
        <CellSelect.Description />
      </CellSelect.Content>
      <CellSelect.Value />
      <CellSelect.Indicator />
    </CellSelect.Trigger>
    <CellSelect.Popover>
      <ListBox>
        <ListBox.Item>
          <ListBox.ItemIndicator />
        </ListBox.Item>
      </ListBox>
    </CellSelect.Popover>
  </CellSelect>
)

Controlled

Pass value and onChange to control the selected key.

"use client";

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

Custom Value

Render a custom display for the selected value with a function child on CellSelect.Value.

"use client";

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

const statuses = [

Disabled

Pass isDisabled to disable the cell.

"use client";

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

const languages = [

Font Family

Each option and the selected value can be rendered in its own font family.

"use client";

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

const fonts = [

Leading Icon

Add a CellSelect.Icon before the label. Pass the tile prop to render it as a colored rounded "tile" (the icon's color can be customized with className or style).

"use client";

import {CellSelect, ListBox} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";

Two-line Cell

Wrap the label and a CellSelect.Description in CellSelect.Content to build a two-line cell with a muted subtitle. The one-line API keeps working when Content is omitted.

"use client";

import {CellSelect, ListBox} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";

Sizes

Use the size prop (sm, md, lg) to control the cell height, padding, and text size.

"use client";

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

const languages = [

Settings Group

Wrap multiple cells in CellSelect.Group to fuse them into a single inset panel with merged corners and hairline dividers. Add an optional header and footer.

"use client";

import {CellSelect, ListBox} from "@darkcode-ui/react";
import {Icon} from "@iconify/react";

Variants

Use variant="secondary" for an accent-tinted cell. The variant styles the trigger row.

"use client";

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

const languages = [

Styling

CellSelect wraps the Select component, so all Select styling patterns apply. The cell layout is provided by the BEM classes below.

CSS Classes

The CellSelect component uses the following CSS classes:

Base Classes

• .cell-select - Root wrapper

Element Classes

• .cell-select__trigger - The visible cell row (wraps Select.Trigger)
• .cell-select__trigger--default - Default variant trigger styling
• .cell-select__trigger--secondary - Secondary variant trigger styling
• .cell-select__trigger--sm / .cell-select__trigger--lg - Size modifiers (base is md)
• .cell-select__icon - Leading icon slot ([data-tile="true"] renders the colored tile)
• .cell-select__content - Column wrapping the label and description (two-line cell)
• .cell-select__label - Leading text label
• .cell-select__description - Secondary text under the label
• .cell-select__value - Selected value display
• .cell-select__indicator - Chevron icon
• .cell-select__popover - Dropdown panel
• .cell-select__group-section - Group wrapper (header + card + footer)
• .cell-select__group - Inset card that fuses the cells
• .cell-select__group-header / .cell-select__group-footer - Group header and footer text

API Reference

CellSelect

The root component. Wraps DarkCode UI Select with cell-style layout.

Also supports all DarkCode UI Select props except variant.

CellSelect.Trigger

The visible cell row containing the icon, label, value, and indicator.

Also supports all DarkCode UI Select.Trigger props.

CellSelect.Icon

Leading icon slot rendered as a span.

Also supports all native span HTML attributes.

CellSelect.Content

Column that stacks the label and description for a two-line cell. Rendered as a div.

Also supports all native div HTML attributes.

CellSelect.Label

Leading text label rendered as a span.

Also supports all native span HTML attributes.

CellSelect.Description

Secondary text rendered under the label (inside CellSelect.Content), as a span.

Also supports all native span HTML attributes.

CellSelect.Value

Display of the currently selected value.

Also supports all DarkCode UI Select.Value props.

CellSelect.Indicator

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

Also supports all DarkCode UI Select.Indicator props.

CellSelect.Popover

Dropdown panel for selection options.

Also supports all DarkCode UI Select.Popover props.

CellSelect.Group

Wraps multiple cells into one inset panel with merged corners and hairline dividers. Used outside individual CellSelect roots.

Also supports all native div HTML attributes.

Accessibility

CellSelect is built on the same React Aria Select primitive as the Select component and provides:

• Full keyboard navigation support (Arrow keys, Home, End, type-ahead)
• Screen reader announcements for the listbox and selection
• Proper focus management between the trigger and popover
• Support for disabled states

For more information, see the React Aria Select documentation.