Data Entryduskmoonimplemented12 demos

AutoComplete

AutoComplete pairs text entry with suggested options for searchable pickers and command inputs.

Import@duskmoon-dev/components/auto-complete

7API sections

23documented props

9behavior scenarios

Key API

allowClearcolordefaultOpendefaultValuedisabledfilterOption

Usage

When to use

Use it inside forms, filters, settings, and any workflow that captures user input.
Prefer controlled props when the value must stay synchronized with application state.

Implementation notes

StylesheetImport @duskmoon-dev/components/styles.css once in the app or docs shell.

StateStart with default props for static examples, then switch to controlled props when state must be shared.

ThemeThe preview inherits the active DuskMoon data-theme value from the docs layout.

Features

Controlled and uncontrolled usage

Documents default values, value props, and change callbacks for form integration.

Validation state

Surfaces status, size, disabled, and option data patterns where the component supports them.

Primary API surface

AutoComplete is most often configured through `allowClear`, `color`, `defaultOpen`, `defaultValue`.

Covered behavior

Renders combobox, placeholder, classes, and options

Feature Demos

Feature demos are authored for the component page, then supplemented with behavior scenarios from the component test coverage.

Preview

Colors

primary

secondary

tertiary

accent

neutral

base

info

success

warning

error

Match options

Async match

Allow clear

Colors and matching

authored

AutoComplete supports the full semantic color palette: primary, secondary, tertiary, accent, neutral, base, info, success, warning, error.

Source

import "@duskmoon-dev/components/styles.css";
import { AutoComplete } from "@duskmoon-dev/components/auto-complete";

const colors = [
  "primary",
  "secondary",
  "tertiary",
  "accent",
  "neutral",
  "base",
  "info",
  "success",
  "warning",
  "error"
] as const;

const options = [
  { value: "react", label: "React" },
  { value: "remix", label: "Remix" },
  { value: "astro", label: "Astro" },
  { value: "solid", label: "Solid" }
];

export function AutoCompleteColorsDemo() {
  return (<div style={{ display: "grid", gap: 10 }}>
  {colors.map((color) => (
    <AutoComplete
      key={color}
      color={color}
      placeholder={`${color} search`}
      options={options}
    />
  ))}
</div>);
}

Preview

Basic usage

authored

Import the component stylesheet and AutoComplete from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { AutoComplete } from "@duskmoon-dev/components/auto-complete";

export function Example() {
  return (<AutoComplete
  color="primary"
  allowClear
  defaultOpen
  defaultValue="re"
  options={[
    { value: "react", label: "React" },
    { value: "remix", label: "Remix" },
    { value: "astro", label: "Astro" }
  ]}
/>);
}

Preview

Renders combobox, placeholder, classes, and options

test-backed

AutoComplete scenario from the component test coverage: renders combobox, placeholder, classes, and options.

Source

import "@duskmoon-dev/components/styles.css";
import { AutoComplete } from "@duskmoon-dev/components/auto-complete";

export function AutoCompleteRendersComboboxPlaceholderClassesDemo() {
  return (<AutoComplete
  color="primary"
  allowClear
  defaultOpen
  defaultValue="re"
  options={[
    { value: "react", label: "React" },
    { value: "remix", label: "Remix" },
    { value: "astro", label: "Astro" }
  ]}
/>);
}

Preview

Colors

primary

secondary

tertiary

accent

neutral

base

info

success

warning

error

Match options

Async match

Allow clear

Supports all color classes

test-backed

AutoComplete scenario from the component test coverage: supports all color classes.

Source

import "@duskmoon-dev/components/styles.css";
import { AutoComplete } from "@duskmoon-dev/components/auto-complete";

export function AutoCompleteSupportsAllColorClassesDemo() {
  return (<AutoComplete
  color="primary"
  allowClear
  defaultOpen
  defaultValue="re"
  options={[
    { value: "react", label: "React" },
    { value: "remix", label: "Remix" },
    { value: "astro", label: "Astro" }
  ]}
/>);
}

Preview

Supports uncontrolled search and filtering

test-backed

AutoComplete scenario from the component test coverage: supports uncontrolled search and filtering.

Source

import "@duskmoon-dev/components/styles.css";
import { AutoComplete } from "@duskmoon-dev/components/auto-complete";

export function AutoCompleteSupportsUncontrolledSearchAndDemo() {
  return (<AutoComplete
  color="primary"
  allowClear
  defaultOpen
  defaultValue="re"
  options={[
    { value: "react", label: "React" },
    { value: "remix", label: "Remix" },
    { value: "astro", label: "Astro" }
  ]}
/>);
}

Preview

Supports selecting an option

test-backed

AutoComplete scenario from the component test coverage: supports selecting an option.

Source

import "@duskmoon-dev/components/styles.css";
import { AutoComplete } from "@duskmoon-dev/components/auto-complete";

export function AutoCompleteSupportsSelectingAnOptionDemo() {
  return (<AutoComplete
  color="primary"
  allowClear
  defaultOpen
  defaultValue="re"
  options={[
    { value: "react", label: "React" },
    { value: "remix", label: "Remix" },
    { value: "astro", label: "Astro" }
  ]}
/>);
}

Preview

Supports controlled value and open state

test-backed

AutoComplete scenario from the component test coverage: supports controlled value and open state.

Source

import "@duskmoon-dev/components/styles.css";
import { AutoComplete } from "@duskmoon-dev/components/auto-complete";

export function AutoCompleteSupportsControlledValueAndDemo() {
  return (<AutoComplete
  color="primary"
  allowClear
  defaultOpen
  defaultValue="re"
  options={[
    { value: "react", label: "React" },
    { value: "remix", label: "Remix" },
    { value: "astro", label: "Astro" }
  ]}
/>);
}

Preview

Supports allowClear

test-backed

AutoComplete scenario from the component test coverage: supports allowclear.

Source

import "@duskmoon-dev/components/styles.css";
import { AutoComplete } from "@duskmoon-dev/components/auto-complete";

export function AutoCompleteSupportsAllowClearDemo() {
  return (<AutoComplete
  color="primary"
  allowClear
  defaultOpen
  defaultValue="re"
  options={[
    { value: "react", label: "React" },
    { value: "remix", label: "Remix" },
    { value: "astro", label: "Astro" }
  ]}
/>);
}

Preview

Supports AutoComplete.Option children and notFoundContent

test-backed

AutoComplete scenario from the component test coverage: supports autocomplete.option children and notfoundcontent.

Source

import "@duskmoon-dev/components/styles.css";
import { AutoComplete } from "@duskmoon-dev/components/auto-complete";

export function AutoCompleteSupportsAutoCompleteOptionChildrenDemo() {
  return (<AutoComplete
  color="primary"
  allowClear
  defaultOpen
  defaultValue="re"
  options={[
    { value: "react", label: "React" },
    { value: "remix", label: "Remix" },
    { value: "astro", label: "Astro" }
  ]}
/>);
}

Preview

Supports disabled state

test-backed

AutoComplete scenario from the component test coverage: supports disabled state.

Source

import "@duskmoon-dev/components/styles.css";
import { AutoComplete } from "@duskmoon-dev/components/auto-complete";

export function AutoCompleteSupportsDisabledStateDemo() {
  return (<AutoComplete
  color="primary"
  allowClear
  defaultOpen
  defaultValue="re"
  options={[
    { value: "react", label: "React" },
    { value: "remix", label: "Remix" },
    { value: "astro", label: "Astro" }
  ]}
/>);
}

Preview

Includes component stylesheet rules

test-backed

AutoComplete scenario from the component test coverage: includes component stylesheet rules.

Source

import "@duskmoon-dev/components/styles.css";
import { AutoComplete } from "@duskmoon-dev/components/auto-complete";

export function AutoCompleteIncludesComponentStylesheetRulesDemo() {
  return (<AutoComplete
  color="primary"
  allowClear
  defaultOpen
  defaultValue="re"
  options={[
    { value: "react", label: "React" },
    { value: "remix", label: "Remix" },
    { value: "astro", label: "Astro" }
  ]}
/>);
}

Preview

Sunshine Theme

Moonlight Theme

Theme aware

authored

Docs previews inherit the DuskMoon data-theme value. Use the header switch to compare light and dark rendering.

Source

<div data-theme="sunshine">
  <AutoComplete
  color="primary"
  allowClear
  defaultOpen
  defaultValue="re"
  options={[
    { value: "react", label: "React" },
    { value: "remix", label: "Remix" },
    { value: "astro", label: "Astro" }
  ]}
/>
</div>

<div data-theme="moonlight">
  <AutoComplete
  color="primary"
  allowClear
  defaultOpen
  defaultValue="re"
  options={[
    { value: "react", label: "React" },
    { value: "remix", label: "Remix" },
    { value: "astro", label: "Astro" }
  ]}
/>
</div>

API

The API reference below lists every parsed exported type or interface for AutoComplete. Start with `allowClear`, `color`, `defaultOpen`, `defaultValue` for common usage.

Types: packages/components/src/components/auto-complete/AutoComplete.types.tsScenarios: packages/components/src/components/auto-complete/AutoComplete.test.tsx

AutoCompletePropsinterface extends Omit< ComponentProps<"div">, "children" | "defaultValue" | "onChange" | "onSelect" >

Prop	Type	Required	Description
`allowClear`	`boolean`	No	allowClear configures AutoComplete.
`children`	`ReactNode`	No	children configures AutoComplete.
`color`	`AutoCompleteColor`	No	color configures AutoComplete.
`defaultOpen`	`boolean`	No	defaultOpen configures AutoComplete.
`defaultValue`	`string`	No	defaultValue configures AutoComplete.
`disabled`	`boolean`	No	disabled configures AutoComplete.
`filterOption`	`AutoCompleteFilterOption`	No	filterOption configures AutoComplete.
`notFoundContent`	`ReactNode`	No	notFoundContent configures AutoComplete.
`onChange`	`(value: string, option?: AutoCompleteOptionType) => void`	No	onChange configures AutoComplete.
`onSearch`	`(value: string) => void`	No	onSearch configures AutoComplete.
`onSelect`	`(value: string, option: AutoCompleteOptionType) => void`	No	onSelect configures AutoComplete.
`open`	`boolean`	No	open configures AutoComplete.
`options`	`AutoCompleteOptionType[]`	No	options configures AutoComplete.
`placeholder`	`string`	No	placeholder configures AutoComplete.
`size`	`AutoCompleteSize`	No	size configures AutoComplete.
`value`	`string`	No	value configures AutoComplete.

AutoCompleteOptionTypeinterface

Prop	Type	Required	Description
`value`	`string`	Yes	value configures AutoComplete.
`label`	`ReactNode`	No	label configures AutoComplete.
`disabled`	`boolean`	No	disabled configures AutoComplete.
`className`	`string`	No	className configures AutoComplete.

AutoCompleteOptionPropsinterface extends Omit< ComponentProps<"div">, "children" >

Prop	Type	Required	Description
`children`	`ReactNode`	No	children configures AutoComplete.
`disabled`	`boolean`	No	disabled configures AutoComplete.
`value`	`string`	Yes	value configures AutoComplete.

AutoCompleteSizetype

"sm" | "md" | "lg"

AutoCompleteColortype

| "primary" | "secondary" | "tertiary" | "accent" | "neutral" | "base" | "info" | "success" | "warning" | "error"

AutoCompleteFilterOptiontype

boolean | ((inputValue: string, option: AutoCompleteOptionType) => boolean)

AutoCompleteComponenttype

ForwardRefExoticComponent< AutoCompleteProps & RefAttributes<HTMLDivElement> > & { Option: ForwardRefExoticComponent< AutoCompleteOptionProps & RefAttributes<HTMLDivElement> >