Input

Native Contract And Imports

Individual example prerequisites (including composition and demo actions):

@import "@duskmoon-dev/core/base.css";
@import "@duskmoon-dev/core/themes/sunshine";
@import "@duskmoon-dev/core/components/input.css";
@import "@duskmoon-dev/core/components/form-group.css";

base.css supplies global focus/utility definitions and shared spacing/shape tokens; use your framework reset when appropriate. Substitute the Moonlight theme for dark forms.

Aggregate: @duskmoon-dev/core with Tailwind v4; no-Tailwind: @duskmoon-dev/core/standalone.css. Individual: @duskmoon-dev/core/components/input.css plus base/theme and form-group.css for associated labels/help. Extensionless components/input exports generated css and constructable styles, not a behavior runtime.

Use native inputs for values, selection, constraints, submission and reset. Actual disabled or fieldset disabled owns semantic disabling. Use .validator for native interaction-based errors and add .validator-success for native success. Explicit aria-invalid="true" wins over those states and color modifiers, including focus. Supply described error text as well as color. See Validator and Field composition.

Sizes: .input-xs/sm/md/lg. Appearance: default, .input-outlined, .input-filled, .input-ghost, legacy .input-bordered. Native readonly remains focusable/submitted; disabled does not. File Input remains included by this entry.

Text input component. Apply color variant classes to match your semantic intent.

Default

<input type="text" name="default-input" class="input" placeholder="Enter text" aria-label="Default input" />

Color Variants

<input type="text" name="primary-input" class="input input-primary" placeholder="Primary" aria-label="Primary input" />

<input type="text" name="secondary-input" class="input input-secondary" placeholder="Secondary" aria-label="Secondary input" />

<input type="text" name="tertiary-input" class="input input-tertiary" placeholder="Tertiary" aria-label="Tertiary input" />

<input type="text" name="info-input" class="input input-info" placeholder="Info" aria-label="Info input" />

<input type="text" name="success-input" class="input input-success" placeholder="Success" aria-label="Success input" />

<input type="text" name="warning-input" class="input input-warning" placeholder="Warning" aria-label="Warning input" />

<input type="text" name="error-input" class="input input-error" placeholder="Error" aria-label="Error input" />

<input type="text" name="ghost-input" class="input input-ghost" placeholder="Ghost (no border)" aria-label="Ghost input" />