Input Primitive
Input is a Starwind Runtime primitive in the form-value-control contract family. Astro and React share one semantic component API. React coordinates reactive state through controlled and default props plus callbacks. Astro renders initial state and coordinates later changes through DOM events and Runtime methods. Raw HTML uses Runtime attributes, DOM events, and imperative methods.
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
value InputValue -
- Description
- Controls the current Input value.
- Kind
- control
- Targets
- -
- Full type
- InputValue
- React
Use value for controlled state and defaultValue for default state, and onValueChange for state changes.
valuedefaultValueonValueChange
- Astro
Use value or defaultValue for initial state, listen for starwind:value-change, and call setValue for later updates.
valuedefaultValuestarwind:value-changesetValue
- Runtime / HTML
listen for starwind:value-change and call setValue for later updates.
starwind:value-changesetValue
defaultValue InputValue -
- Description
- Sets the initial Input value for uncontrolled usage.
- Kind
- control
- Targets
- -
- Full type
- InputValue
- React
Use value for controlled state and defaultValue for default state, and onValueChange for state changes.
valuedefaultValueonValueChange
- Astro
Use value or defaultValue for initial state, listen for starwind:value-change, and call setValue for later updates.
valuedefaultValuestarwind:value-changesetValue
- Runtime / HTML
listen for starwind:value-change and call setValue for later updates.
starwind:value-changesetValue
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
- React
Use value for controlled state and defaultValue for default state, and onValueChange for state changes.
valuedefaultValueonValueChange
- Astro
Use value or defaultValue for initial state, listen for starwind:value-change, and call setValue for later updates.
valuedefaultValuestarwind:value-changesetValue
- Runtime / HTML
listen for starwind:value-change and call setValue for later updates.
starwind:value-changesetValue
Events
valueChange onValueChange value: string
- Description
- Fires when the value changes for Input.
- DOM event
- starwind:value-change
- Details type
- InputValueChangeDetails
- Timing
- -
- Cancelable
- No
State
value InputValue value / defaultValue
- Description
- Tracks the current Input value.
- Initial attribute
- -
- Runtime getter
- getValue
- Runtime setter
- setValue
- React
Use value for controlled state and defaultValue for default state, and onValueChange for state changes.
valuedefaultValueonValueChange
- Astro
Use value or defaultValue for initial state, listen for starwind:value-change, and call setValue for later updates.
valuedefaultValuestarwind:value-changesetValue
- Runtime / HTML
listen for starwind:value-change and call setValue for later updates.
starwind:value-changesetValue
Data Attributes
Runtime hooks
Metadata
Runtime API
- Factory
createInput- Import
@starwind-ui/runtime/input- Root hook
- root
data-sw-input - Option props
- defaultValue, disabled, onValueChange, value
Runtime Setters
Form Participation
| Fact | Value |
|---|---|
| Form props | name, required, value |
| Hidden input | - |
| Field integration | Yes |
Related Styled Components
Changelog
View version history v1.0.0 3 releases
v1.0.0
- Promoted this Primitive's vendoring version to the stable 1.0.0 baseline. Its existing API and Runtime behavior carry forward from the previous release.
v0.1.1
- Marked generated React Primitive files as client modules so vendored installs preserve client boundaries in React server frameworks.
v0.1.0
- Introduced value synchronization and Runtime state while preserving native input attributes and events.