Inline / Cell Select

Borderless select that reads as text, for settings rows and sentences ("Notify me [weekly]").

Import

import { InlineSelect, SettingRow } from '@marbleui/ui'

Props

<InlineSelect>

Prop	Type	Default
items *required	`T[]`	`—`
label *required	`string`	`—`
onChange *required	`(k: Key) => void`	`—`
value *required	`Key`	`—`
className	`string`	`—`

<SettingRow>

Settings row: label + description on the left, any inline control on the right.

Prop	Type	Default
children *required	`ReactNode`	`—`
title *required	`string`	`—`
description	`string`	`—`

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Button · React Aria Select · React Aria SelectValue. Follow the primitive's docs for the full keyboard map.

Usage notes

Borderless select that reads as accent-coloured text inside a sentence or settings row (“Email me a summary weekly”). SettingRow lays out a title and description beside any control. For a labelled form field use Select.

const [frequency, setFrequency] = useState<string | number>('weekly')
<SettingRow title="Digest" description="Activity summaries by email.">
  <InlineSelect label="Digest frequency" items={[{ id: 'daily', label: 'daily' }, { id: 'weekly', label: 'weekly' }]} value={frequency} onChange={setFrequency} />
</SettingRow>

Controlled only: value and onChange are required; items need an id and a label.
label becomes the trigger’s aria-label. SettingRow’s title isn’t linked to the control, so repeat its wording in label.
The chosen label shows inline as-is, so write labels to fit the sentence (lowercase mid-sentence).

Example source · show

import { useState } from 'react'
import { InlineSelect, SettingRow } from './inline-select'

const freq = [{ id: 'instant', label: 'instantly' }, { id: 'daily', label: 'daily' }, { id: 'weekly', label: 'weekly' }, { id: 'never', label: 'never' }]
const themes = [{ id: 'system', label: 'System' }, { id: 'light', label: 'Light' }, { id: 'dark', label: 'Dark' }]
function Sentence() {
  const [f, setF] = useState<string | number>('weekly')
  return <div className="flex items-baseline gap-1 text-lg text-fg">Email me a summary <InlineSelect label="Summary frequency" items={freq} value={f} onChange={setF} />.</div>
}
function Rows() {
  const [t, setT] = useState<string | number>('system')
  const [f, setF] = useState<string | number>('daily')
  return <div className="w-[26rem] divide-y divide-border rounded-xl border border-border bg-surface"><SettingRow title="Appearance" description="Follow your OS or pick one."><InlineSelect label="Appearance" items={themes} value={t} onChange={setT} /></SettingRow><SettingRow title="Digest" description="Activity summaries by email."><InlineSelect label="Digest frequency" items={freq} value={f} onChange={setF} /></SettingRow></div>
}
export const styles = { Sentence, 'Settings rows': Rows }

Source: packages/ui/src/inline-select/inline-select.tsx

Catalog

Category: selection
Priority: Extra
Primitive: composed
React Aria: Select
Base UI: Select