Cell Select

Usage

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

import { useState } from "react";

Anatomy

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

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

<CellSelect>
  <CellSelect.Label />
  <CellSelect.Indicator />
  <CellSelect.Trigger />
  <CellSelect.Value />
  <CellSelect.Popover />
</CellSelect>;

Controlled

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

import { useState } from "react";

Custom Value

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

import { useState } from "react";

Disabled

"use client";

import { CellSelect } from "@thenamespace/uikit";
import { ListBox } from "@thenamespace/uikit/list-box";

Font Family

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

import { useState } from "react";

Settings Group

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

import { useState } from "react";

Variants

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

import { useState } from "react";

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__label - Leading text label
• .cell-select__value - Selected value display
• .cell-select__indicator - Chevron icon
• .cell-select__popover - Dropdown panel

API Reference

CellSelect

The root component. Wraps Namespace UIKit Select with cell-style layout.

Also supports all Namespace UIKit Select props except variant.

CellSelect.Trigger

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

Also supports all Namespace UIKit Select.Trigger props.

CellSelect.Label

Leading text label rendered as a span.

Also supports all native span HTML attributes.

CellSelect.Value

Display of the currently selected value.

Also supports all Namespace UIKit Select.Value props.

CellSelect.Indicator

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

Also supports all Namespace UIKit Select.Indicator props.

CellSelect.Popover

Dropdown panel for selection options.

Also supports all Namespace UIKit Select.Popover props.