Data Entryduskmoonimplemented9 demos

Select

Select chooses one or more values from a bounded option set.

Import@duskmoon-dev/components/select

12API sections

27documented props

7behavior scenarios

Key API

allowCleardefaultValuedisabledloadingmodeonChange

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

Select is most often configured through `allowClear`, `defaultValue`, `disabled`, `loading`.

Covered behavior

Renders options, placeholder, size, status, loading, and disabled classes

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 Select from its package subpath, then render it with the core props.

Source

import "@duskmoon-dev/components/styles.css";
import { Select } from "@duskmoon-dev/components/select";

export function Example() {
  return (<Select
  options={[
    { label: "React", value: "react" },
    { label: "Astro", value: "astro" },
    { label: "TypeScript", value: "typescript" }
  ]}
  defaultValue="react"
  placeholder="Select a stack"
  allowClear
/>);
}

Preview

Renders options, placeholder, size, status, loading, and disabled classes

test-backed

Select scenario from the component test coverage: renders options, placeholder, size, status, loading, and disabled classes.

Source

import "@duskmoon-dev/components/styles.css";
import { Select } from "@duskmoon-dev/components/select";

export function SelectRendersOptionsPlaceholderSizeDemo() {
  return (<Select
  options={[
    { label: "React", value: "react" },
    { label: "Astro", value: "astro" },
    { label: "TypeScript", value: "typescript" }
  ]}
  defaultValue="react"
  placeholder="Select a stack"
  allowClear
/>);
}

Preview

Supports uncontrolled selection and onChange payload

test-backed

Select scenario from the component test coverage: supports uncontrolled selection and onchange payload.

Source

import "@duskmoon-dev/components/styles.css";
import { Select } from "@duskmoon-dev/components/select";

export function SelectSupportsUncontrolledSelectionAndDemo() {
  return (<Select
  options={[
    { label: "React", value: "react" },
    { label: "Astro", value: "astro" },
    { label: "TypeScript", value: "typescript" }
  ]}
  defaultValue="react"
  placeholder="Select a stack"
  allowClear
/>);
}

Preview

Supports allowClear for single values

test-backed

Select scenario from the component test coverage: supports allowclear for single values.

Source

import "@duskmoon-dev/components/styles.css";
import { Select } from "@duskmoon-dev/components/select";

export function SelectSupportsAllowClearForSingleDemo() {
  return (<Select
  options={[
    { label: "React", value: "react" },
    { label: "Astro", value: "astro" },
    { label: "TypeScript", value: "typescript" }
  ]}
  defaultValue="react"
  placeholder="Select a stack"
  allowClear
/>);
}

Preview

Supports multiple mode toggling

test-backed

Select scenario from the component test coverage: supports multiple mode toggling.

Source

import "@duskmoon-dev/components/styles.css";
import { Select } from "@duskmoon-dev/components/select";

export function SelectSupportsMultipleModeTogglingDemo() {
  return (<Select
  options={[
    { label: "React", value: "react" },
    { label: "Astro", value: "astro" },
    { label: "TypeScript", value: "typescript" }
  ]}
  defaultValue="react"
  placeholder="Select a stack"
  allowClear
/>);
}

Preview

Supports showSearch and filterOption

test-backed

Select scenario from the component test coverage: supports showsearch and filteroption.

Source

import "@duskmoon-dev/components/styles.css";
import { Select } from "@duskmoon-dev/components/select";

export function SelectSupportsShowSearchAndFilterOptionDemo() {
  return (<Select
  options={[
    { label: "React", value: "react" },
    { label: "Astro", value: "astro" },
    { label: "TypeScript", value: "typescript" }
  ]}
  defaultValue="react"
  placeholder="Select a stack"
  allowClear
/>);
}

Preview

Supports tags mode custom values

test-backed

Select scenario from the component test coverage: supports tags mode custom values.

Source

import "@duskmoon-dev/components/styles.css";
import { Select } from "@duskmoon-dev/components/select";

export function SelectSupportsTagsModeCustomDemo() {
  return (<Select
  options={[
    { label: "React", value: "react" },
    { label: "Astro", value: "astro" },
    { label: "TypeScript", value: "typescript" }
  ]}
  defaultValue="react"
  placeholder="Select a stack"
  allowClear
/>);
}

Preview

Supports Select.Option and Select.OptGroup children

test-backed

Select scenario from the component test coverage: supports select.option and select.optgroup children.

Source

import "@duskmoon-dev/components/styles.css";
import { Select } from "@duskmoon-dev/components/select";

export function SelectSupportsSelectOptionAndDemo() {
  return (<Select
  options={[
    { label: "React", value: "react" },
    { label: "Astro", value: "astro" },
    { label: "TypeScript", value: "typescript" }
  ]}
  defaultValue="react"
  placeholder="Select a stack"
  allowClear
/>);
}

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">
  <Select
  options={[
    { label: "React", value: "react" },
    { label: "Astro", value: "astro" },
    { label: "TypeScript", value: "typescript" }
  ]}
  defaultValue="react"
  placeholder="Select a stack"
  allowClear
/>
</div>

<div data-theme="moonlight">
  <Select
  options={[
    { label: "React", value: "react" },
    { label: "Astro", value: "astro" },
    { label: "TypeScript", value: "typescript" }
  ]}
  defaultValue="react"
  placeholder="Select a stack"
  allowClear
/>
</div>

API

The API reference below lists every parsed exported type or interface for Select. Start with `allowClear`, `defaultValue`, `disabled`, `loading` for common usage.

Types: packages/components/src/components/select/Select.types.tsScenarios: packages/components/src/components/select/Select.test.tsx

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

Prop	Type	Required	Description
`allowClear`	`boolean`	No	allowClear configures Select.
`children`	`ReactNode`	No	children configures Select.
`defaultValue`	`SelectChangeValue`	No	defaultValue configures Select.
`disabled`	`boolean`	No	disabled configures Select.
`loading`	`boolean`	No	loading configures Select.
`mode`	`SelectMode`	No	mode configures Select.
`onChange`	`(`	No	onChange configures Select.
`value`	`SelectChangeValue,`	Yes	value configures Select.
`option`	`SelectOptionType \| SelectOptionType[],`	No	option configures Select.
`options`	`SelectOptionInput[]`	No	options configures Select.
`placeholder`	`ReactNode`	No	placeholder configures Select.
`showSearch`	`boolean`	No	showSearch configures Select.
`size`	`SelectSize`	No	size configures Select.
`status`	`SelectStatus`	No	status configures Select.
`value`	`SelectChangeValue`	No	value configures Select.

SelectOptionTypeinterface

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

SelectOptGroupTypeinterface

Prop	Type	Required	Description
`label`	`ReactNode`	No	label configures Select.
`options`	`SelectOptionType[]`	Yes	options configures Select.
`className`	`string`	No	className configures Select.

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

Prop	Type	Required	Description
`children`	`ReactNode`	No	children configures Select.
`disabled`	`boolean`	No	disabled configures Select.
`value`	`SelectValue`	Yes	value configures Select.

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

Prop	Type	Required	Description
`children`	`ReactNode`	No	children configures Select.
`label`	`ReactNode`	No	label configures Select.

SelectValuetype

string | number

SelectModetype

"multiple" | "tags"

SelectSizetype

"sm" | "md" | "lg"

SelectStatustype

"error" | "success"

SelectOptionInputtype

SelectOptionType | SelectOptGroupType

SelectChangeValuetype

SelectValue | SelectValue[] | undefined

SelectComponenttype

ForwardRefExoticComponent< SelectProps & RefAttributes<HTMLDivElement> > & { Option: ForwardRefExoticComponent< SelectOptionProps & RefAttributes<HTMLDivElement> >