Data Entryduskmoonimplemented8 demos

Mentions

Mentions captures text input with mention suggestions.

Import@duskmoon-dev/components/mentions

5API sections

18documented props

6behavior scenarios

Key API

defaultValuenotFoundContentonChangeonSearchonSelectoptions

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

Mentions is most often configured through `defaultValue`, `notFoundContent`, `onChange`, `onSearch`.

Covered behavior

Renders textarea, classes, placement, and filtered options

Feature Demos

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

Preview

Basic usage

authored

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

Source

import "@duskmoon-dev/components/styles.css";
import { Mentions } from "@duskmoon-dev/components/mentions";

export function Example() {
  return (<Mentions
  defaultValue="@design"
  placeholder="Mention a teammate"
  options={[
    { value: "design", label: "Design team" },
    { value: "engineering", label: "Engineering" },
    { value: "release", label: "Release desk" }
  ]}
/>);
}

Preview

Renders textarea, classes, placement, and filtered options

test-backed

Mentions scenario from the component test coverage: renders textarea, classes, placement, and filtered options.

Source

import "@duskmoon-dev/components/styles.css";
import { Mentions } from "@duskmoon-dev/components/mentions";

export function MentionsRendersTextareaClassesPlacementDemo() {
  return (<Mentions
  defaultValue="@design"
  placeholder="Mention a teammate"
  options={[
    { value: "design", label: "Design team" },
    { value: "engineering", label: "Engineering" },
    { value: "release", label: "Release desk" }
  ]}
/>);
}

Preview

Supports search and select callbacks with insertion

test-backed

Mentions scenario from the component test coverage: supports search and select callbacks with insertion.

Source

import "@duskmoon-dev/components/styles.css";
import { Mentions } from "@duskmoon-dev/components/mentions";

export function MentionsSupportsSearchAndSelectDemo() {
  return (<Mentions
  defaultValue="@design"
  placeholder="Mention a teammate"
  options={[
    { value: "design", label: "Design team" },
    { value: "engineering", label: "Engineering" },
    { value: "release", label: "Release desk" }
  ]}
/>);
}

Preview

Supports controlled value and custom prefix and split

test-backed

Mentions scenario from the component test coverage: supports controlled value and custom prefix and split.

Source

import "@duskmoon-dev/components/styles.css";
import { Mentions } from "@duskmoon-dev/components/mentions";

export function MentionsSupportsControlledValueAndDemo() {
  return (<Mentions
  defaultValue="@design"
  placeholder="Mention a teammate"
  options={[
    { value: "design", label: "Design team" },
    { value: "engineering", label: "Engineering" },
    { value: "release", label: "Release desk" }
  ]}
/>);
}

Preview

Supports Mentions.Option children and disabled options

test-backed

Mentions scenario from the component test coverage: supports mentions.option children and disabled options.

Source

import "@duskmoon-dev/components/styles.css";
import { Mentions } from "@duskmoon-dev/components/mentions";

export function MentionsSupportsMentionsOptionChildrenDemo() {
  return (<Mentions
  defaultValue="@design"
  placeholder="Mention a teammate"
  options={[
    { value: "design", label: "Design team" },
    { value: "engineering", label: "Engineering" },
    { value: "release", label: "Release desk" }
  ]}
/>);
}

Preview

Supports keyboard navigation and notFoundContent

test-backed

Mentions scenario from the component test coverage: supports keyboard navigation and notfoundcontent.

Source

import "@duskmoon-dev/components/styles.css";
import { Mentions } from "@duskmoon-dev/components/mentions";

export function MentionsSupportsKeyboardNavigationAndDemo() {
  return (<Mentions
  defaultValue="@design"
  placeholder="Mention a teammate"
  options={[
    { value: "design", label: "Design team" },
    { value: "engineering", label: "Engineering" },
    { value: "release", label: "Release desk" }
  ]}
/>);
}

Preview

Supports disabled state

test-backed

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

Source

import "@duskmoon-dev/components/styles.css";
import { Mentions } from "@duskmoon-dev/components/mentions";

export function MentionsSupportsDisabledStateDemo() {
  return (<Mentions
  defaultValue="@design"
  placeholder="Mention a teammate"
  options={[
    { value: "design", label: "Design team" },
    { value: "engineering", label: "Engineering" },
    { value: "release", label: "Release desk" }
  ]}
/>);
}

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">
  <Mentions
  defaultValue="@design"
  placeholder="Mention a teammate"
  options={[
    { value: "design", label: "Design team" },
    { value: "engineering", label: "Engineering" },
    { value: "release", label: "Release desk" }
  ]}
/>
</div>

<div data-theme="moonlight">
  <Mentions
  defaultValue="@design"
  placeholder="Mention a teammate"
  options={[
    { value: "design", label: "Design team" },
    { value: "engineering", label: "Engineering" },
    { value: "release", label: "Release desk" }
  ]}
/>
</div>

API

The API reference below lists every parsed exported type or interface for Mentions. Start with `defaultValue`, `notFoundContent`, `onChange`, `onSearch` for common usage.

Types: packages/components/src/components/mentions/Mentions.types.tsScenarios: packages/components/src/components/mentions/Mentions.test.tsx

Prop	Type	Required	Description
`children`	`ReactNode`	No	children configures Mentions.
`defaultValue`	`string`	No	defaultValue configures Mentions.
`notFoundContent`	`ReactNode`	No	notFoundContent configures Mentions.
`onChange`	`(value: string) => void`	No	onChange configures Mentions.
`onSearch`	`(text: string, prefix: string) => void`	No	onSearch configures Mentions.
`onSelect`	`(option: MentionsOptionType, prefix: string) => void`	No	onSelect configures Mentions.
`options`	`MentionsOptionType[]`	No	options configures Mentions.
`placement`	`MentionsPlacement`	No	placement configures Mentions.
`prefix`	`string \| string[]`	No	prefix configures Mentions.
`split`	`string`	No	split configures Mentions.
`value`	`string`	No	value configures Mentions.

MentionsOptionTypeinterface

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

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

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

MentionsPlacementtype

"top" | "bottom"

MentionsComponenttype

ForwardRefExoticComponent< MentionsProps & RefAttributes<HTMLTextAreaElement> > & { Option: ForwardRefExoticComponent< MentionsOptionProps & RefAttributes<HTMLDivElement> >