DocSpace-client/packages/asc-web-components/text-input
2022-01-28 21:44:58 +08:00
..
common-input-styles.js
index.js Web: restore code format 2022-01-28 21:44:58 +08:00
input.js Web:Editor: wrap editor in theme provider and delete theme as props in components 2022-01-27 21:54:58 +08:00
README.md Web: Components/Common: fix imports 2021-02-26 00:19:45 +03:00
styled-text-input.js Web:Components:TextInput: add support dark-theme 2021-12-12 20:32:32 +08:00
text-input.js Web:Components:TextInput: add support dark-theme 2021-12-12 20:32:32 +08:00
text-input.stories.js Web: Components: added story for TextInput 2021-03-11 14:33:32 +03:00
text-input.test.js

TextInput

Input field for single-line strings

Usage

import TextInput from "@appserver/components/text-input";
const mask = [/\d/, /\d/, "/", /\d/, /\d/, "/", /\d/, /\d/, /\d/, /\d/];
<TextInput
  mask={mask}
  value="text"
  onChange={(event) => alert(event.target.value)}
/>

Properties

Props Type Required Values Default Description
autoComplete string - - - Used as HTML autocomplete property
className string - - - Accepts class
hasError bool - - - Indicates the input field has an error
hasWarning bool - - - Indicates the input field has a warning
id string - - - Used as HTML id property
isAutoFocussed bool - - - Focus the input field on initial render
isDisabled bool - - false Indicates that the field cannot be used (e.g not authorised, or changes not saved)
isReadOnly bool - - false Indicates that the field is displaying read-only content
mask array - - - input text mask
name string - - - Used as HTML name property
onBlur func - - - Called when field is blurred
onChange func - - - Called with the new value. Required when input is not read only. Parent should pass it back as value
onFocus func - - - Called when field is focused
placeholder string - - - Placeholder text for the input
scale bool - - - Indicates the input field has scale
size string base, middle, big, huge, large base Supported size of the input fields.
style obj, array - - - Accepts css style
type string text, password text Supported type of the input fields.
value string - - Value of the input
withBorder bool - - true Indicates that component contain border
fontWeight number, string - - - Sets the font weight
isBold bool - - false Sets font weight value to 600