@commercetools-uikit/text-input

A controlled text input component for single-line strings with validation states.

Usage no npm install needed!

<script type="module">
  import commercetoolsUikitTextInput from 'https://cdn.skypack.dev/@commercetools-uikit/text-input';
</script>

README

TextInput

Description

A controlled text input component for single-line strings with validation states.

Installation

yarn add @commercetools-uikit/text-input
npm --save install @commercetools-uikit/text-input

Additionally install the peer dependencies (if not present)

yarn add react
npm --save install react

Usage

import TextInput from '@commercetools-uikit/text-input';

const Example = () => (
  <TextInput value="foo" onChange={(event) => alert(event.target.value)} />
);

export default Example;

Properties

Props Type Required Default Description
id string Used as HTML id property. An id is auto-generated when it is not specified.
autoComplete string Used as HTML autocomplete property
className string className forwarded to the underlying <input />.
name string Used as HTML name of the input component. property
value string Value of the input component.
onChange ChangeEventHandler Called with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
onBlur FocusEventHandler Called when input is blurred
onFocus FocusEventHandler Called when input is focused
isAutofocussed boolean Focus the input on initial render
isDisabled boolean Indicates that the input cannot be modified (e.g not authorized, or changes currently saving).
isReadOnly boolean Indicates that the field is displaying read-only content
hasError boolean Indicates if the input has invalid values
hasWarning boolean
placeholder string Placeholder text for the input
horizontalConstraint union
Possible values:
, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'
'scale' Horizontal size limit of the input fields.

data-* props

The component further forwards all data- attributes to the underlying input component.

Static methods

TextInput.isEmpty

Returns true when the value is considered empty, which is when the value is empty or consists of spaces only.

TextInput.isEmpty(''); // -> true
TextInput.isEmpty(' '); // -> true
TextInput.isEmpty('tree'); // -> false

Main Functions and use cases are:

  • Input field for single-line strings