Socket
Socket
Sign inDemoInstall

@commercetools-uikit/text-input

Package Overview
Dependencies
9
Maintainers
0
Versions
840
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@commercetools-uikit/text-input

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


Version published
Maintainers
0
Created

Readme

Source

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

PropsTypeRequiredDefaultDescription
idstringUsed as HTML id property. An id is auto-generated when it is not specified.
autoCompletestringUsed as HTML autocomplete property
aria-invalidbooleanIndicate if the value entered in the input is invalid.
aria-errormessagestringHTML ID of an element containing an error message related to the input.
classNamestringclassName forwarded to the underlying <input />.
namestringUsed as HTML name of the input component. property
valuestringValue of the input component.
onChangeChangeEventHandlerCalled with an event containing the new value. Required when input is not read only. Parent should pass it back as value.
onBlurFocusEventHandlerCalled when input is blurred
onFocusFocusEventHandlerCalled when input is focused
isAutofocussedbooleanFocus the input on initial render
isCondensedbooleanUse this property to reduce the paddings of the component for a ui compact variant
isDisabledbooleanIndicates that the input cannot be modified (e.g not authorized, or changes currently saving).
isReadOnlybooleanIndicates that the field is displaying read-only content
hasErrorbooleanIndicates if the input has invalid values
hasWarningboolean
placeholderstringPlaceholder text for the input
horizontalConstraintunion
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

Keywords

FAQs

Last updated on 08 Jul 2024

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc