Loading component…
Loading component…
What automated tests prove about each implementation — separate from whether the package itself is a finished product. Derived from the test files; how the levels are earned.
React
Package maturity: stable · Implementation verification: Beta
Angular
Package maturity: preview · Implementation verification: Preview
SwiftUI
Package maturity: stable · Implementation verification: Experimental
Jetpack Compose
Package maturity: stable · Implementation verification: Experimental
Flutter
Package maturity: stable · Implementation verification: Experimental
This platform’s whole catalogue is verified to React beta, Angular preview, SwiftUI experimental, Jetpack Compose experimental, Flutter experimental. The catalogue figure is the weakest component on that platform, not an average.
A single-line text field. Generated from Figma KinetixUI ›
01. Form Inputs › Input (54855:13836).
Reduced motion: off · your browser setting
npx @kinetixui/cli add inputimport { Input } from "@kinetixui/ui";
<Input type="email" placeholder="you@example.com" />Reduced motion: off · your browser setting
Focus is :focus-visible and Disabled is the native attribute. Setting
state="Error" also sets aria-invalid. Label and helper text are not part of
the control — they belong to the Field composition.
| Prop | Type | Default |
|---|---|---|
state | "Default" | "Focus" | "Error" | "Disabled" | "Default" |
Plus all native <input> attributes.
The props of @kinetixui/ui, generated from its TypeScript. Props inherited from the underlying DOM element (className, id, event handlers) are accepted too and are not listed.
This table is React-specific. The SwiftUI, Jetpack Compose, Flutter and Angular implementations share the design contract — the same variants, sizes, states and tokens — but each exposes its own idiomatic interface. Their real usage is in the platform tabs on the example above, not here.
| Prop | Type | Notes |
|---|---|---|
| state | "Default" | "Focus" | "Disabled" | "Error" | null | |
| corners | "default" | "sharp" | "pill" | "rounded" | nullcorner style — matches the design source's Corners property | corner style — matches the design source's Corners property |
2 behaviours asserted on every commit by packages/ui/src/components-keyboard.test.tsx. Listed because they are tested, not the other way round — if one stops being tested it stops appearing here.
are reached in source order by Tab and skipped when disabled
stay focusable and readable when read-only, and reject typing