Input

Basic input example demonstrating core behavior.

Package: @solidiom/input
Version: 0.0.1-next.0
Status: stable

Examples

import * as Input from "@solidiom/input"

;<div style={{ display: "flex", flexDirection: "column", gap: 12 }}>
  <Input.Root type="text" placeholder="Enter your name" />
  <Input.Root type="email" placeholder="you@example.com" required />
  <Input.Root type="password" placeholder="••••••••" />
  <Input.Root type="text" disabled placeholder="Cannot edit" />
  <Input.Root type="text" invalid placeholder="Has error" aria-invalid="true" />
</div>

The input supports all standard HTML input types. Use the invalid prop to mark a field with validation errors, which sets aria-invalid="true". Compose with @solidiom/field for automatic label/description/error wiring.

View source

        export function Root(props: InputRootProps) {
  const handleInput: JSX.EventHandler<HTMLInputElement, InputEvent> = (e) => {
    props.onValueChange?.(e.currentTarget.value)
    if (props.onInput) {
      ;(props.onInput as (e: InputEvent & { currentTarget: HTMLInputElement }) => void)(e)
    }
  }

  return (
    <input
      id={props.id}
      type={props.type ?? "text"}
      name={props.name}
      value={props.value ?? props.defaultValue ?? ""}
      placeholder={props.placeholder}
      disabled={props.disabled}
      readonly={props.readOnly}
      required={props.required}
      aria-invalid={props.invalid ? "true" : undefined}
      aria-required={props.required ? "true" : undefined}
      aria-disabled={props.disabled ? "true" : undefined}
      class={props.class}
      style={props.style}
      onInput={handleInput}
      onBlur={props.onBlur}
      onFocus={props.onFocus}
      {...applySemanticAttrs({
        scope: "input",
        part: "root",
        disabled: props.disabled,
        readonly: props.readOnly,
        required: props.required,
        invalid: props.invalid,
        placeholder: !props.value && !!props.placeholder,
      })}
    />
  )
}