Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@commercetools-uikit/multiline-text-input

Package Overview
Dependencies
Maintainers
3
Versions
1007
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@commercetools-uikit/multiline-text-input

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

  • 0.0.0-canary-20241001174409
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
2.7K
decreased by-20.89%
Maintainers
3
Weekly downloads
 
Created
Source

MultilineTextInput

Description

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

Installation

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

Additionally install the peer dependencies (if not present)

yarn add react react-intl
npm --save install react react-intl

Usage

import MultilineTextInput from '@commercetools-uikit/multiline-text-input';

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

export default Example;

Properties

PropsTypeRequiredDefaultDescription
namestringUsed as HTML name of the input component. 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.
autoCompletestringUsed as HTML autocomplete property
idstringUsed as HTML id property. An id is auto-generated when it is not specified.
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
defaultExpandMultilineTextbooleanfalseExpands multiline text input initially
isDisabledbooleanIndicates that the input cannot be modified (e.g not authorized, or changes currently saving).
isReadOnlybooleanIndicates that the field is displaying read-only content
placeholderstringPlaceholder text for the input
hasErrorbooleanIndicates that input has errors
hasWarningbooleanControl to indicate on the input if there are selected values that are potentially invalid
horizontalConstraintunion
Possible values:
, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 'scale', 'auto'
Horizontal size limit of the input fields.
rightActionIconReactElementCustom action icon to be displayed on the right side of the input. Will only show, if rightActionProps is provided.
rightActionPropsTSecondaryButtonIconPropsProps for the right-action icon-button. Required when rightActionIcon is provided. At least a label and an onClick prop/function need to be provided.
isCondensedbooleanSet this to true to reduce the paddings of the input allowing the input to display more data in less space.
maxRowsnumberSet this to value to determine the maximum text rows of the text area. Any text overflow past this row number would implement a scroll

Static methods

MultilineTextInput.isEmpty

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

MultilineTextInput.isEmpty(''); // -> true
MultilineTextInput.isEmpty(' '); // -> true
MultilineTextInput.isEmpty('\n'); // -> true
MultilineTextInput.isEmpty('tree'); // -> false

Dos and don'ts

  • Whenever a user input can hold multiline strings this MultilineTextInput component is recommended

  • Not recommended to be used when the content is single-lined (e.g email address, password etc.)

  • The horizontal constraint is not recommended to be smaller than s since content may cut off

Keywords

FAQs

Package last updated on 01 Oct 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
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc