@dreamworld/dw-input NPM

dw-input

A material input element made with lit-html. For more detail visit https://material.io/develop/web/components/input-controls/text-field/.

Installation

  npm install @dreamworld/dw-input

Usage

  @import '@dreamworld/dw-input/dw-input';

Demo

Features

It follows material design outlines input style and provides all features of it. know more
It auto select's text if autoSelect property is true
Provides a validator property to add custom validations
Set multiline to true to show input as text area
Set prefixSvgIcon and suffixSvgIcon to show prefix and suffix icon
Performs validation on blur. It also performs validation on User type if input is invalid.

Events

Triggers value-changed event on value change.

Methods

focus - Focuses the input
selectText - Selected input's text
validate - Call this to validate input. Returns false if value is invalid.
formattedValueGetter - Use to auto-format value on blur. It provides value in argument. It must be return a string.
focusedValueGetter - Use to set value on focus. It provides value in argument. It must be return a string.

Theme

Configure color of the icon using --dw-icon-color css variable.

Example css to change icon color

dw-input{
--dw-icon-color: green;
}

Custom input

Override dwInput class to create a custom input

class CustomInput extends DwInput {
  static get styles() {
  return [
    DwInput.styles,
    css`
      .mdc-text-field{
        border-radius: 8px;
      }`
    ];
  }
}
customElements.define('custom-input', CustomInput);

<custom-input></custom-input>

Examples

<dw-input label="Name" validator="<VALIDATION_FN>" placeholder="Enter name here" autoSelect required hint="Hint text"></dw-input>

<dw-input label="Number" disabled allowedPattern="[0-9]" value="12"></dw-input>

<dw-input label="Number" readOnly prefixSvgIcon='<SVG_PATH>'  suffixSvgIcon='<SVG_PATH>'></dw-input>

<dw-input noLabel multiline></dw-input>

<dw-input value="12" originalValue="12" highLightOnChanged></dw-input>

lit litelement input material textarea

@dreamworld/dw-button @dreamworld/dw-form @dreamworld/dw-icon @dreamworld/dw-icon-button @dreamworld/dw-tooltip @material/textfield lodash-es

@infinitebrahmanuniverse/nolb-_dre @everything-registry/sub-chunk-256 @dreamworld/dw-date-input @dreamworld/dw-select @dreamworld/dw-multi-value-field

4.1.8-remove-extra-conditions-from-tipIconButtons.1

3 days ago

4.1.7

22 days ago

4.1.6

28 days ago

4.1.6-required-error-show-always.1

28 days ago

4.1.5-fix-error-message-not-shown-for-textarea.1

30 days ago

4.1.4

1 month ago

4.1.5

30 days ago

4.1.3-somtime-input-is-valid-but-errormsg-shows.1

1 month ago

4.1.3-when-input-is-readonly-input-should-be-not-focused.1

1 month ago

4.1.3

1 month ago

4.1.2

1 month ago

4.1.1-type-number-shows-error-for-fractional-numbers.1

1 month ago

1 month ago

3 months ago

3 months ago

3 months ago

4.1.0-add-new-template-for-char-counter.1

3 months ago

4.0.12

4 months ago

4.0.12-disabled-textarea-background-color-issue.1

4 months ago

4.0.11

4 months ago

4.0.10

5 months ago

4.0.10-fix-issue-sometime-isvaid-property-not-properl.1

5 months ago

4.0.9

5 months ago

4.0.7

5 months ago

4.0.8

5 months ago

4.0.7-date-input-set-value.1

5 months ago

4.0.6-length-of-undefined.1

5 months ago

4.0.5

5 months ago

4.0.6

5 months ago

4.0.5-highlight-issue.1

5 months ago

4.0.4

5 months ago

4.0.3

5 months ago

4.1.0-on-focus-show-tip.1

5 months ago

4.0.4-invalid-issue.1

5 months ago

3.7.0-standardize-form-validation.1

6 months ago

3.7.0-standardize-form-validation.2

6 months ago

3.7.0-standardize-form-validation.3

6 months ago

3.7.0-standardize-form-validation.4

6 months ago

3.7.0-standardize-form-validation.5

6 months ago

3.7.0-standardize-form-validation.6

6 months ago

3.7.0-standardize-form-validation.7

6 months ago

3.7.0-standardize-form-validation.8

6 months ago

3.7.0-standardize-form-validation.9

6 months ago

4.0.1

5 months ago

4.0.0

5 months ago

4.0.2

5 months ago

3.5.8-input-helper-text-white-space-var.1

7 months ago

3.8.0-standardize-form-validation.1

5 months ago

3.8.0-standardize-form-validation.2

5 months ago

3.8.0-standardize-form-validation.3

5 months ago

3.8.0-standardize-form-validation.4

5 months ago

3.8.0-standardize-form-validation.5

5 months ago

3.8.0-standardize-form-validation.6

5 months ago

3.8.0-standardize-form-validation.7

5 months ago

3.5.4-label-not-proper-when-input-has-leading-icon.1

10 months ago

3.5.4-label-not-proper-when-input-has-leading-icon.5

10 months ago

3.5.4-label-not-proper-when-input-has-leading-icon.4

10 months ago

3.5.4-label-not-proper-when-input-has-leading-icon.3

10 months ago

3.5.4-label-not-proper-when-input-has-leading-icon.2

10 months ago

3.6.0-warning-error-in-tooltip.2

7 months ago

3.6.0-warning-error-in-tooltip.3

7 months ago

3.6.3-dw-input-field-color.1

6 months ago

3.5.7-hint-text-disable-dark-theme.1

7 months ago

3.6.1-hint-error-warning-tip-refactor.1

6 months ago

3.7.0

6 months ago

3.6.2-handle-trailing-icon-tip-icons.1

6 months ago

3.5.10

6 months ago

3.5.6-invalid-char-counter-color.1

9 months ago

3.6.2

6 months ago

3.6.1

6 months ago

3.6.0

6 months ago

3.5.10-input-suffix-text-disable.1

6 months ago

3.6.4-standardize-form-validation.1

6 months ago

6 months ago

6 months ago

7 months ago

9 months ago

9 months ago

10 months ago

6 months ago

7 months ago

3.6.4-hint-text-not-shown-when-error-msg-set.1

6 months ago

3.7.0-introduce-symbol-property.1

6 months ago

3.7.0-standardize-form-validation.10

6 months ago

3.2.1

1 year ago

3.2.0

1 year ago

3.2.0-add-property-iconFont.1

1 year ago

3.3.0-dense-style-update.1

1 year ago

3.1.5

1 year ago

3.1.4

1 year ago

3.6.0-warning-error-in-tooltip.1

11 months ago

3.1.6-dense-style-update.2

1 year ago

3.1.6-dense-style-update.1

1 year ago

3.5.1-reflect-invalid-to-attribute.1

12 months ago

3.3.0-input-style-update.1

1 year ago

3.2.1-change-event-name.1

1 year ago

12 months ago

12 months ago

12 months ago

1 year ago

3.3.0-warning-error-in-tooltip.1

1 year ago

3.1.5-ssr-issues.1

1 year ago

3.4.0

1 year ago

3.1.4-dw-input-es-module.1

1 year ago

3.3.0-highlight-state.1

1 year ago

3.2.0-add-css-when-input-type-is-dense.1

1 year ago

3.2.0-add-css-when-input-type-is-dense.2

1 year ago

3.3.0

1 year ago

3.2.0-postfix.1

1 year ago

3.1.3-min-max-number.1

1 year ago

3.1.3

1 year ago

3.1.2

1 year ago

3.1.1

1 year ago

3.1.2-textarea-undefined.1

1 year ago

3.1.0-add-way-to-show-warning-text.1

1 year ago

2 years ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

2.1.6-fix-auto-fill.1

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2.2.0-upgrade-version.2

3 years ago

2.2.0-upgrade-version.1

3 years ago

2.1.5-undefined-textarea.1

3 years ago

2.1.3-disabled-enter-input-replace-enter-value-on-paste.1

3 years ago

2.1.4

3 years ago

2.1.3

3 years ago

2.1.5

3 years ago

2.1.3-fix-original-value-issue.1

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

1.17.11-fix-issue-max-length.1

3 years ago

1.17.11-update-mwc.1

3 years ago

1.17.11-textarea-is-undefined.1

3 years ago

1.18.0-single-line-input-height.1

3 years ago

1.17.10

3 years ago

1.17.10-toggle-type.1

3 years ago

1.17.10-toggle-type.4

3 years ago

1.17.10-toggle-type.2

3 years ago

1.17.10-toggle-type.3

3 years ago

1.17.9

3 years ago

1.17.9-fix-autogrow-issue.2

3 years ago

1.17.8

3 years ago

1.17.9-fix-autogrow-issue.1

3 years ago

1.17.8-focus-after-timeout.1

3 years ago

1.17.7

3 years ago

1.17.7-focus-after-eye-click.1

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

1.17.4-update-config.1

4 years ago

1.17.3

4 years ago

1.17.3-border-issue.1

4 years ago

1.17.3-take-undecorate-property.3

4 years ago

1.17.3-take-undecorate-property.1

4 years ago

1.17.3-take-undecorate-property.2

4 years ago

1.17.2

4 years ago

1.17.2-border-not-shown-for-textare-when-using-dw-input.1

4 years ago

1.17.1

4 years ago

1.17.1-sentry-error-value-of-undefined.1

4 years ago

1.17.0

4 years ago

1.17.0-undecorated-style.1

4 years ago

1.16.1

4 years ago

1.16.1-do-not-paste-invalid-vallue.1

4 years ago

1.16.1-value-of-undefined.1

4 years ago

1.15.2

4 years ago

1.16.0

4 years ago

1.15.2-input-instance-issue.2

4 years ago

1.15.2-input-instance-issue.1

4 years ago

1.15.1

4 years ago

1.15.1-layout-of-null.1

4 years ago

1.14.0

4 years ago

1.15.0

4 years ago

1.14.0-use-our-lit-element-instead-of-lit-element-base-class.1

4 years ago

1.13.1

4 years ago

1.13.1-resize-on-focus.1

4 years ago

1.12.0-password-visibility.4

4 years ago

1.12.1

4 years ago

1.12.0

4 years ago

1.12.0-password-visibility.3

4 years ago

1.12.0-password-visibility.1

4 years ago

1.12.0-password-visibility.2

4 years ago

1.11.8-intiall-resize-is-not-work.1

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

1.12.0-maxlength-and-type.1

4 years ago

1.12.0-maxlength-support-in-multiline.4

4 years ago

1.11.7-focus-issue.1

4 years ago

1.11.6-layout-issue.4

4 years ago

1.11.6

4 years ago

1.12.0-maxlength-support-in-multiline.3

4 years ago

1.12.0-maxlength-support-in-multiline.2

4 years ago

1.11.6-layout-issue.3

4 years ago

1.11.6-layout-issue.2

4 years ago

1.11.6-layout-issue.1

4 years ago

1.12.0-maxlength-support-in-multiline.1

4 years ago

1.11.6-bug-input-of-null.1

4 years ago

1.11.5

4 years ago

1.11.4

4 years ago

1.11.4-blur-error.1

4 years ago

1.11.4-layout-error.2

4 years ago

1.11.4-layout-error.1

4 years ago

1.11.3

4 years ago

1.11.3-traling-and-leading-icon-is-not-show-proper-in-ios.1

4 years ago

1.11.2

4 years ago

1.11.2-update-if-conditoin.1

4 years ago

1.11.1

4 years ago

1.11.1-textarea-instance-set-on-connected-callback.1

4 years ago

1.11.0

4 years ago

1.10.2

4 years ago

1.10.2-update-email-patter.1

4 years ago

1.10.1

4 years ago

1.10.1-update-email-pattern.1

4 years ago

1.10.1-provide-a-way-to-get-textarea-valur.1

4 years ago

1.11.0-cherry-pick-allowed-characters-on-paste.1

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

1.7.4-fix-lenth-of-null-issue.1

4 years ago

1.7.4-trim-originalvalue.1

4 years ago

1.7.3

4 years ago

1.7.3-sentry-blur-error.1

4 years ago

1.8.0-rename-truncateOnBlur-to-trimOnBlur.1

4 years ago

1.7.2

4 years ago

1.7.1

4 years ago

1.7.1-focus-error.1

4 years ago

1.7.1-max-height-issue.1

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

1.6.0-textarea-maxlength.1

4 years ago

1.5.1

4 years ago

1.5.1-prevent-enter-on-key-up.3

4 years ago

1.5.1-prevent-enter-on-key-up.1

4 years ago

1.5.1-prevent-enter-on-key-up.2

4 years ago

1.5.1-focus-console-error.1

4 years ago

1.5.1-host-height-issue.1

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

1.0.1-auto-formatting.17

5 years ago

1.1.2

5 years ago

1.1.2-textarea-font-family-is-not-applied-proper.1

5 years ago

1.0.1-auto-formatting.16

5 years ago

1.1.0-auto-formatting-change-version-dw-icon-button.2

5 years ago

1.1.0-auto-formatting-change-version-dw-icon-button.1

5 years ago

1.1.0-auto-formatting-yarn-setup.1

5 years ago

1.0.1-auto-formatting.15

5 years ago

1.0.1-auto-formatting.14

5 years ago

1.0.1-auto-formatting.13

5 years ago

1.0.1-auto-formatting.12

5 years ago

1.0.1-auto-formatting.11

5 years ago

1.0.1-auto-formatting.10

5 years ago

1.0.1-auto-formatting.9

5 years ago

1.2.0-auto-grow-text-area.3

5 years ago

1.1.1

5 years ago

1.2.0-auto-grow-text-area.2

5 years ago

1.2.0-auto-grow-text-area.1

5 years ago

1.0.1-auto-formatting.8

5 years ago

1.0.1-auto-formatting.7

5 years ago

1.0.1-auto-formatting.6

5 years ago

1.0.1-auto-formatting.5

5 years ago

1.1.0

5 years ago

1.0.1-autogrow-textarea.7

5 years ago

1.0.1-auto-formatting.4

5 years ago

1.0.1-autogrow-textarea.6

5 years ago

1.0.1-auto-formatting.3

5 years ago

1.0.1-autogrow-textarea.5

5 years ago

1.0.1-auto-formatting.2

5 years ago

1.0.1-autogrow-textarea.4

5 years ago

1.0.1-autogrow-textarea.3

5 years ago

1.0.1-autogrow-textarea.2

5 years ago

1.1.0-test.1

5 years ago

1.0.0

5 years ago