On this page

Input Primitive

Input is a Starwind Runtime primitive in the form-value-control contract family.

Anatomy

Use the Astro primitive adapter to render Input anatomy with the Runtime wiring included.

---
import { Input } from "@starwind-ui/astro/input";
---

<Input.Root placeholder="Email" />

Use the React primitive adapter when Input state participates in React rendering.

import { Input } from "@starwind-ui/react/input";

export function Example() {
  return (
    <Input.Root placeholder="Email" />
  );
}

Render the Input data-sw-* contract yourself, then initialize createInput.

<input data-sw-input placeholder="Email" />

<script type="module">
  import { createInput } from "@starwind-ui/runtime/input";

  const root = document.querySelector("[data-sw-input]");
  if (root) {
    createInput(root);
  }
</script>

API Reference

Root

The main element that owns the Input Runtime instance.

Default element: input
Discovery hook: data-sw-input
Role: -

Props

Prop Type Default

value InputValue -

Description: Controls the current Input value.
Kind: control
Targets: -
Full type: InputValue

defaultValue InputValue -

Description: Sets the initial Input value for uncontrolled usage.
Kind: control
Targets: -
Full type: InputValue

disabled boolean false

Description: Disables the Root part.
Kind: option
Targets: -
Full type: boolean

name string -

Description: Sets the submitted form field name.
Kind: attribute
Targets: root
Full type: string

required boolean -

Description: Marks the form control as required.
Kind: attribute
Targets: root
Full type: boolean

onValueChange (value: string, details: InputValueChangeDetails) => void -

Description: Runs when the Input value changes.
Kind: callback
Targets: -
Full type: (value: string, details: InputValueChangeDetails) => void

Events

Event Callback Value

valueChange onValueChange value: string

Description: Fires when the value changes for Input.
DOM event: starwind:value-change
Details type: InputValueChangeDetails
Timing: -
Cancelable: No

State

State Type Props

value InputValue value / defaultValue

Description: Tracks the current Input value.
Initial attribute: -
Runtime getter: getValue
Runtime setter: setValue
State control support: React supports controlled and default state with value and defaultValue props. Runtime/HTML emits starwind:value-change and updates with setValue. Astro adapters render initial/default state, but do not expose reactive controlled-state props for this state.

Data Attributes

Runtime hooks

Attribute Value Description

data-sw-input - Marks the Root part so Starwind Runtime can find it.

Metadata

Attribute Value Description

data-disabled - Reflects the disabled prop on the Root part.

Runtime API

Factory: createInput
Import: @starwind-ui/runtime/input
Root hook: root data-sw-input
Option props: defaultValue, disabled, onValueChange, value

Runtime Setters

Method Target Description

setValue state: value Updates the current Input value from Runtime code.

setDisabled prop: disabled Updates whether Input is disabled from Runtime code.

Form Participation

Fact	Value
Form props	name, required, value
Hidden input	-
Field integration	Yes

Component Relationship

Input Direct primitive