Design system
Documentation experienceDS-07

Home / Components / Combobox

Approved

Combobox

Provide the governed NexWell Combobox contract for input & control interfaces.

Purpose

Provide the governed NexWell Combobox contract for input & control interfaces.

Source evidence informs purpose and anatomy; NexWell tokens, accessibility, and API are authoritative.

When to use

Use Combobox only for its documented input & control purpose.

When not to use

Do not restyle it into an unrelated interaction.

Anatomy

  1. container
  2. content

Specifications, variants, sizes, and states

Specifications

  • Exact dimensions, padding, gaps, icon sizes, radius, and typography: source-verification-required.
  • Implementation behavior is inspectable below; it is not evidence of founder approval.

Variants and sizes

Purpose-led variants only.

source-verification-required: no governed component-specific size matrix is available

States

collapsed · expanded · empty · loading · invalid · disabled · read-only

Measurements and typography

Every field is represented. A status is not a value: unresolved evidence cannot be converted into an implementation number.

Height / widthsource-verification-requiredNo approved exact value may be inferred.
Paddingsource-verification-requiredNo approved exact value may be inferred.
Gapsource-verification-requiredNo approved exact value may be inferred.
Radius / bordersource-verification-requiredNo approved exact value may be inferred.
Icon sizesource-verification-requiredNo approved exact value may be inferred.
Font / size / weight / line height / trackingsource-verification-requiredNo approved exact value may be inferred.

State matrix

Actual implementation states are listed below. Requested universal states not supported by the component API remain explicitly unclaimed.

Defaultnot-applicable-or-source-verification-required
Hovernot-applicable-or-source-verification-required
Focusnot-applicable-or-source-verification-required
Active / pressednot-applicable-or-source-verification-required
DisabledImplemented / inspect preview
LoadingImplemented / inspect preview
Errornot-applicable-or-source-verification-required
Successnot-applicable-or-source-verification-required
Readonlynot-applicable-or-source-verification-required
EmptyImplemented / inspect preview

React and TypeScript API

Public properties

approved-current Generated from the package registry; controls expose only the supported subset listed here.

selectionModeoptionsvalueinputValueloadingrenderOptionrenderValue
import { Combobox } from "@nexwellaifactory/components";
// selectionMode
// options
// value
// inputValue
// loading
// renderOption
// renderValue

export function Example() {
  return <Combobox />;
}

Open stable isolated canvas

Usage and content

Do

Use the component for its documented purpose.

Don’t

Do not restyle it into an unrelated interaction.

Content rules

  • Use concise, task-specific labels.
  • Do not communicate state through color alone.
  • Allow localized text to wrap without hiding critical actions.

Accessibility, keyboard, responsive, and RTL

Accessibility

  • Native semantics first
  • Accessible name required
  • State exposed programmatically

Keyboard

  • Native element behavior
  • Visible focus indicator
  • No positive tabindex

Responsive and RTL

Wraps or scrolls without hiding critical content; supports 200% text expansion.

Uses logical layout; mirrors only spatial meaning.

Actual package output

Interactive example

Cardiology
4 options available

Preview width changes the bounded canvas; use the RTL control below to inspect logical layout.

Token mapping and source evidence

Traceable implementation

Founder-approved NexWell architecture and DS-14 reconciliation; no historical source-evidence row.

semantic colorfoundation spacingfoundation shapefoundation motion

Founder-approved DS-14 inventory reconciliation; no historical source-evidence row

Missing fields in the source remain documented source absence, not requirements invented by the implementation.

Evidence completeness

0 associated local source records. Statuses below come directly from the DS-13 Checkpoint 1 component evidence matrix.

Cross-platform implementation

React / TypeScript: current package API is shown above.

Flutter: source-verification-required — no canonical Flutter API or implementation mapping exists, and this web portal does not infer one.

AI agents: consume approved records only; preserve proposed and unresolved statuses and import the public component instead of recreating it.