6.2.2 • Published 10 months ago

@maggioli-design-system/mds-input v6.2.2

Weekly downloads
-
License
MIT
Repository
-
Last release
10 months ago

mds-input

Form interaction

This component is scoped and not shadowed, so the inner input element interacts natively with form element.

This is a web-component from Maggioli Design System Magma, built with StencilJS, TypeScript, Storybook. It's based on the web-component standard and it's designed to be agnostic from the JavaScirpt framework you are using.

Properties

PropertyAttributeDescriptionTypeDefault
autocompleteautocompleteSpecifies whether the element should have autocomplete enabledAutocompleteType \| undefined'off'
autofocusautofocusSpecifies that the element should automatically get focus when the page loadsbooleanfalse
awaitawaitSpecifies if the spinner icon is shown, replacing the icon if presentbooleanfalse
controlDecreaseLabelcontrol-decrease-labelSpecifies the label for control button decrease for component when type is numberstring \| undefined'Riduci'
controlIncreaseLabelcontrol-increase-labelSpecifies the label for control button increase for component when type is numberstring \| undefined'Aumenta'
controlsIconcontrols-iconSpecifies the icon type of the counter button when the input type is set to number"arithmetic" \| "arrow" \| undefined'arrow'
controlsLayoutcontrols-layoutSpecifies the layout of the counter button when the input type is set to number"horizontal" \| "vertical" \| undefined'vertical'
datalist--A list of search terms to be searched from the input field, it should be used with type="search" input.string[] \| undefinedundefined
disableddisabledIf true, the element is displayed as disabledboolean \| undefinedfalse
iconiconAn icon displayed at the right of the inputstring \| undefinedundefined
maxmaxSpecifies the maximum value use it with input type="number" or type="date" Example: max="180", max="2046-12-04"string \| undefinedundefined
maxlengthmaxlengthSpecifies the maximum number of characters allowed in an element use it with input type="number"number \| undefinedundefined
minminSpecifies the minimum value use it with input type="number" or type="date" Example: min="-3", min="1988-04-15"number \| string \| undefinedundefined
minlengthminlengthSpecifies the minimum number of characters allowed in an element use it with input type="number"number \| undefinedundefined
namenameIs needed to reference the form data after the form is submittedstring \| undefinedundefined
patternpatternSpecifies a regular expression that element\'s value is checked againststring \| undefinedundefined
placeholderplaceholderSpecifies a short hint that describes the expected value of the elementstring''
readonlyreadonlySpecifies that the element is read-onlyboolean \| undefinedfalse
requiredrequiredSpecifies that the element must be filled out before submitting the formboolean \| undefinedfalse
stepstepSpecifies the interval between legal numbers in an input fieldstring \| undefinedundefined
tiptipSets the word(s) of the tip of the input fieldstring \| undefinedundefined
typetypeSpecifies the type of input element"date" \| "email" \| "number" \| "password" \| "search" \| "tel" \| "text" \| "textarea" \| "time" \| "url" \| undefined'text'
typographytypographySpecifies the typography of input element"detail" \| "snippet"'detail'
valuevalueSpecifies the value of the input elementstring \| undefined''
variantvariantSets the variant of the input field"error" \| "info" \| "success" \| "warning" \| undefinedundefined

Events

EventDescriptionType
mdsInputBlurEmits a void event when input element is blurredCustomEvent<void>
mdsInputChangeEmits an InputChangeEventDetail when the value of the input element changesCustomEvent<MdsInputEventDetail>
mdsInputFocusEmits a void event when input element is focusedCustomEvent<void>
mdsInputKeydownEmits a KeyboardEvent when a keyboard key is pressed on the focused input elementCustomEvent<KeyboardEvent>

Methods

getInputElement() => Promise<HTMLInputElement | HTMLTextAreaElement>

Returns the native <input> element used under the hood.

Returns

Type: Promise<HTMLInputElement | HTMLTextAreaElement>

setFocus() => Promise<void>

Sets focus on the specified my-input. Use this method instead of the global input.focus().

Returns

Type: Promise<void>

Shadow Parts

PartDescription
"counter-button-decrease"
"counter-button-increase"
"field"
"password-toggle-button"

CSS Custom Properties

NameDescription
--mds-input-backgroundSets the background-color of the component
--mds-input-icon-colorSets the icon color of the component
--mds-input-ringSets the box-shadow of the component's input
--mds-input-shadowSets the box-shadow of the component's input
--mds-input-textarea-field-sizingSets the height of the textarea automatically, this is an EXPERIMENTAL css property, so it couldn't work in every browser
--mds-input-textarea-max-heightSets the max-height of the component when attribute type is set to textarea
--mds-input-textarea-min-heightSets the min-height of the component when attribute type is set to textarea
--mds-input-tip-backgroundSets the background color of the tip message at the bottom right of the component
--mds-input-variant-colorSets the variant colors of the component

Dependencies

Used by

Depends on

Graph

graph TD;
  mds-input --> mds-button
  mds-input --> mds-input-tip
  mds-input --> mds-input-tip-item
  mds-input --> mds-icon
  mds-input --> mds-spinner
  mds-button --> mds-spinner
  mds-button --> mds-icon
  mds-button --> mds-text
  mds-input-tip-item --> mds-text
  mds-input-field --> mds-input
  style mds-input fill:#f9f,stroke:#333,stroke-width:4px

Built with love @ Gruppo Maggioli from R&D Department

6.2.1

10 months ago

6.2.0

10 months ago

6.1.4

10 months ago

6.2.2

10 months ago

6.1.2

11 months ago

6.1.3

10 months ago

6.1.1

11 months ago

6.1.0

11 months ago

6.0.0

11 months ago

5.8.2

1 year ago

5.8.1

1 year ago

5.8.0

1 year ago

5.7.6

1 year ago

5.7.5

1 year ago

5.7.4

1 year ago

5.7.2

1 year ago

5.7.1

1 year ago

5.6.0

1 year ago

5.4.0

1 year ago

5.3.0

1 year ago

5.1.4

2 years ago

5.1.3

2 years ago

5.1.2

2 years ago

5.1.1

2 years ago

5.1.0

2 years ago

5.0.0

2 years ago

4.2.2

2 years ago

4.2.1

2 years ago

4.2.0

2 years ago

4.1.0

2 years ago

4.0.0

2 years ago

3.0.3

3 years ago

3.0.2

3 years ago

3.1.0

3 years ago

3.0.1

3 years ago

3.0.0

3 years ago

2.0.1

3 years ago

2.0.0

3 years ago

1.0.0

4 years ago