InputsReact
A native input element that works with Field out of the box: it takes Field's label, description, validation and state attributes.
Rendered by React 19.3.1
Loading React…26Tests passing in React · 0 failing
10.7 KiBSize
Not measured yetMemory
Not measured yetSpeed
productdevbook and 11 upstream authors6 commits · last
Installation
npm i @hamur/reactNot on npm yet. The package goes out under the chosen name.
Anatomy
Import the component and assemble its parts:
<Input />Examples
The demo at the top is the one example this component has so far.
API reference
3 props across 1 parts, in React syntax. className, style, render are listed once, under Shared props.
InputInput
A native input element that automatically works with Field. Renders an <input>.
| Prop | Type | Default |
|---|---|---|
defaultValueThe default value of the input. | string | number | readonly string[] | — |
valueThe value of the input. | string | number | readonly string[] | — |
onValueChangeCallback fired when the value changes. | ((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void) | — |
| Data attribute | Description |
|---|---|
data-disabled | Present when the input is disabled. |
data-valid | Present when the input is in a valid state (when wrapped in Field.Root). |
data-invalid | Present when the input is in an invalid state (when wrapped in Field.Root). |
data-touched | Present when the input has been touched (when wrapped in Field.Root). |
data-dirty | Present when the input's value has changed (when wrapped in Field.Root). |
data-filled | Present when the input is filled (when wrapped in Field.Root). |
data-focused | Present when the input is focused (when wrapped in Field.Root). |
Shared props
Every part that renders an element takes these.
| Prop | Type |
|---|---|
classNameCSS class applied to the element, or a function that
returns a class based on the component's state. | string | ((state: State) => string | undefined) |
styleStyle applied to the element, or a function that
returns a style object based on the component's state. | React.CSSProperties | ((state: State) => React.CSSProperties | undefined) |
renderAllows you to replace the component's HTML element
with a different tag, or compose it with another component. | React.ReactElement<unknown, string | React.JSXElementConstructor<any>> | ComponentRenderFn<HTMLProps, State> |
Keyboard and accessibility
Keyboard
Input is a native <input>; the browser handles its keys.
Accessibility
| Part | Sets | So that |
|---|---|---|
| Input | renders an <input> | the browser's own editing, autofill and keyboard work |
| Input | the label, aria-describedby and aria-invalid of the Field around it | the input is read with its name, hint and error |
Focus order
- Input is one tab stop.