Skip to content

Early previewhamur is not on npm yet. The components are being built in the open, follow along on GitHub.

InputsReact

Input

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…
import * as React from 'react'
import { Input } from '@hamur/react/input'

export default function InputExample() {
  const [value, setValue] = React.useState('')
  return (
    <div className="stack">
      <Input
        className="input"
        aria-label="Name"
        placeholder="Your name"
        onValueChange={(next: string) => setValue(next)}
      />
      <Input
        className="input"
        aria-label="Disabled"
        placeholder="Disabled"
        disabled
      />
      <p className="muted">You typed: {value}</p>
    </div>
  )
}
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/react

Not 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>.

Input props
PropTypeDefault
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)—
Input data attributes
Data attributeDescription
data-disabledPresent when the input is disabled.
data-validPresent when the input is in a valid state (when wrapped in Field.Root).
data-invalidPresent when the input is in an invalid state (when wrapped in Field.Root).
data-touchedPresent when the input has been touched (when wrapped in Field.Root).
data-dirtyPresent when the input's value has changed (when wrapped in Field.Root).
data-filledPresent when the input is filled (when wrapped in Field.Root).
data-focusedPresent when the input is focused (when wrapped in Field.Root).

Shared props

Every part that renders an element takes these.

Shared props
PropType
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

What the parts set
PartSetsSo that
Inputrenders an <input>the browser's own editing, autofill and keyboard work
Inputthe label, aria-describedby and aria-invalid of the Field around itthe input is read with its name, hint and error

Focus order

  1. Input is one tab stop.