Skip to main content

Inputs overview

Input is a component capable of capturing user's input provided by various input hardware: keyboard, mouse, touchscreen, camera, microphone, etc.

Input API

All input components expose the same native props that mirror the attributes available on a standard HTMLInputElement element. They are grouped into three tiers:

  • Base – common to every input type
  • Textual – for fields that accept free‑form text
  • Numeric – a special case of textual input that only accepts numbers

Base (native) props

PropTypeDescription
namestringName of the input, submitted with form data.
requiredbooleanSet native HTML required attribute.
disabledbooleanDisable input.
autoFocusbooleanProvide substitute for native autofocus functionality.
formstringSet native HTML form attribute.

Input types

Koval has three major types of inputs: interactive, textual and numeric.

CategoryWhat it capturesTypical component
InteractiveClick / tap / touch – e.g. checkboxes, radios, switchesInputCheckbox, InputRadio, Select
TextualText entry via keyboard (or other text‑input hardware)InputText, Textarea
NumericTextual input that only accepts numbersInputNumber, InputRange

Interactive input

Interactive inputs capture user input provided by mouse, touchscreen, etc.

Result
Loading...
Live Editor
//import {InputCheckbox} from 'koval-ui';

function Example(props) {
  return <InputCheckbox defaultChecked={false} label="Checkbox" indeterminate={true} />;
}

Interactive input props

Outside native props interactive inputs accept input-specific props based on their logic. E.g. InputCheckbox accepts label and indeterminate props.

Textual input

Textual inputs capture the user text input provided by the keyboard.

Result
Loading...
Live Editor
//import {InputText} from 'koval-ui';

function Example(props) {
  return <InputText defaultValue="Text input" />;
}

Textual input props

Textual inputs are provided with additional props related to input mode and visual text formatting.

PropTypeDescription
inputModeenumallows the browser to display an appropriate virtual keyboard.
placeholderstringSet text for placeholder.
autoCompletestringSet native HTML autocomplete attribute.
maxLengthnumberDefine the maximum number of characters the user can enter.
minLengthnumberDefine the minimum number of characters the user can enter.
patternstringPattern attribute specifies a regular expression the form control's value should match.
sizenumberDefine the width of the input in characters.

Numeric input

Result
Loading...
Live Editor
//import {InputNumber} from 'koval-ui';

function Example(props) {
  return <InputNumber defaultValue={33} />;
}

Numeric input props

Numeric inputs are a thin wrapper over textual inputs that drop the properties that don't make sense for numbers (inputMode, pattern, maxLength, minLength).

They add the standard numeric attributes:

PropTypeDescription
minnumberMinimum numeric value.
maxnumberDefine the maximum value that is acceptable and valid for the input.
stepnumberSpecify the granularity that the value must adhere to.