Standard duskmoon implemented 10 demos

Input

Input captures short text, search, password, and textarea input.

Import @duskmoon-dev/components/input

12 API sections

23 documented props

8 behavior scenarios

Key API

allowClearprefixsizestatussuffixtype

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

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

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

Theme The 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

Input is most often configured through `allowClear`, `prefix`, `size`, `status`.

Covered behavior

Renders parity input props

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

Source

import "@duskmoon-dev/components/styles.css";
import { Input } from "@duskmoon-dev/components/input";

export function Example() {
  return (<Input
  status="success"
/>);
}

Preview

Renders parity input props

test-backed

Input scenario from the component test coverage: renders parity input props.

Source

import "@duskmoon-dev/components/styles.css";
import { Input } from "@duskmoon-dev/components/input";

export function InputRendersParityInputPropsDemo() {
  return (<Input
  // Renders parity input props
  status="success"
/>);
}

Preview

Supports status, size, variant, prefix, and suffix

test-backed

Input scenario from the component test coverage: supports status, size, variant, prefix, and suffix.

Source

import "@duskmoon-dev/components/styles.css";
import { Input } from "@duskmoon-dev/components/input";

export function InputSupportsStatusSizeVariantDemo() {
  return (<Input
  // Supports status, size, variant, prefix, and suffix
  status="success"
/>);
}

Preview

AllowClear clears uncontrolled value and calls onChange

test-backed

Input scenario from the component test coverage: allowclear clears uncontrolled value and calls onchange.

Source

import "@duskmoon-dev/components/styles.css";
import { Input } from "@duskmoon-dev/components/input";

export function InputAllowClearClearsUncontrolledValueDemo() {
  return (<Input
  // AllowClear clears uncontrolled value and calls onChange
  status="success"
/>);
}

Preview

Search calls onSearch from enter key and enter button

test-backed

Input scenario from the component test coverage: search calls onsearch from enter key and enter button.

Source

import "@duskmoon-dev/components/styles.css";
import { Input } from "@duskmoon-dev/components/input";

export function InputSearchCallsOnSearchFromDemo() {
  return (<Input
  // Search calls onSearch from enter key and enter button
  status="success"
/>);
}

Preview

Password renders as password and toggles visibility

test-backed

Input scenario from the component test coverage: password renders as password and toggles visibility.

Source

import "@duskmoon-dev/components/styles.css";
import { Input } from "@duskmoon-dev/components/input";

export function InputPasswordRendersAsPasswordDemo() {
  return (<Input
  // Password renders as password and toggles visibility
  status="success"
/>);
}

Preview

TextArea renders class props and showCount

test-backed

Input scenario from the component test coverage: textarea renders class props and showcount.

Source

import "@duskmoon-dev/components/styles.css";
import { Input } from "@duskmoon-dev/components/input";

export function InputTextAreaRendersClassPropsDemo() {
  return (<Input
  // TextArea renders class props and showCount
  status="success"
/>);
}

Preview

TextArea updates showCount for uncontrolled changes

test-backed

Input scenario from the component test coverage: textarea updates showcount for uncontrolled changes.

Source

import "@duskmoon-dev/components/styles.css";
import { Input } from "@duskmoon-dev/components/input";

export function InputTextAreaUpdatesShowCountForDemo() {
  return (<Input
  // TextArea updates showCount for uncontrolled changes
  status="success"
/>);
}

Preview

Group wraps children with input-group

test-backed

Input scenario from the component test coverage: group wraps children with input-group.

Source

import "@duskmoon-dev/components/styles.css";
import { Input } from "@duskmoon-dev/components/input";

export function InputGroupWrapsChildrenWithDemo() {
  return (<Input
  // Group wraps children with input-group
  status="success"
/>);
}

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">
  <Input
  status="success"
/>
</div>

<div data-theme="moonlight">
  <Input
  status="success"
/>
</div>

API

The API reference below lists every parsed exported type or interface for Input. Start with `allowClear`, `prefix`, `size`, `status` for common usage.

Types: packages/components/src/components/input/Input.types.ts Scenarios: packages/components/src/components/input/Input.test.tsx

Prop	Type	Required	Description
`allowClear`	`boolean`	No	allowClear configures Input.
`className`	`string`	No	className configures Input.
`prefix`	`ReactNode`	No	prefix configures Input.
`size`	`InputSize`	No	size configures Input.
`status`	`InputStatus`	No	status configures Input.
`suffix`	`ReactNode`	No	suffix configures Input.
`type`	`ComponentProps<"input">["type"]`	No	type configures Input.
`variant`	`InputVariant`	No	variant configures Input.
`onChange`	`(event: InputChangeEvent) => void`	No	onChange configures Input.

SearchProps interface extends Omit<InputProps, "suffix" | "type">

Prop	Type	Required	Description
`enterButton`	`ReactNode`	No	enterButton configures Input.
`loading`	`boolean`	No	loading configures Input.
`onSearch`	`(`	No	onSearch configures Input.
`value`	`string,`	Yes	value configures Input.
`event`	`KeyboardEvent<HTMLInputElement> \| MouseEvent<HTMLElement>,`	No	event configures Input.

PasswordProps interface extends Omit<InputProps, "suffix" | "type">

Prop	Type	Required	Description
`visibilityToggle`	`boolean`	No	visibilityToggle configures Input.

TextAreaProps interface extends Omit< ComponentProps<"textarea">, "children" | "className" | "size" >

Prop	Type	Required	Description
`autoSize`	`boolean \| { minRows?: number; maxRows?: number }`	No	autoSize configures Input.
`className`	`string`	No	className configures Input.
`showCount`	`boolean`	No	showCount configures Input.
`size`	`InputSize`	No	size configures Input.
`status`	`InputStatus`	No	status configures Input.
`variant`	`InputVariant`	No	variant configures Input.
`resize`	`TextAreaResize`	No	resize configures Input.
`onChange`	`(event: TextAreaChangeEvent) => void`	No	onChange configures Input.

InputSize type

"sm" | "md" | "lg"

InputStatus type

"error" | "success"

InputVariant type

"filled" | "outlined"

TextAreaResize type

"none" | "both" | "horizontal" | "vertical"

InputChangeEvent type

ChangeEvent<HTMLInputElement>

TextAreaChangeEvent type

ChangeEvent<HTMLTextAreaElement>

InputGroupProps type

ComponentProps<"div">

InputComponent type

ForwardRefExoticComponent< InputProps & RefAttributes<HTMLInputElement> > & { Search: ForwardRefExoticComponent< SearchProps & RefAttributes<HTMLInputElement> >