mds-input

mds-input - Lit version

Install

Install the component via npm

npm install mds-input

Or use yarn

yarn add mds-input

Use in JavaScript

Import the component in your project

<script type="module">
  import 'mds-input';
</script>

His dependencies

<script type="module">
  import { defineCustomElements } from '@maggioli-design-system/mds-text/loader';
  defineCustomElements();
</script>

Maggioli Design System style in the head tag

<link rel="stylesheet" href="./node_modules/@maggioli-design-system/styles/dist/css/colors-rgb.css">

The use it in your HTML

<mds-input type="text" placeholder="Write something"></mds-input>

Properties

Property	Attribute	Description	Type	Default
autocomplete	autocomplete	Specifies whether the element should have autocomplete enabled	"address" | "name" | "url" | "email" | "off" | "on" | "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "bday" | "bday-day" | "bday-month" | "bday-year" | "cc-additional-name" | "cc-csc" | "cc-exp" | "cc-exp-month" | "cc-exp-year" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-type" | "country" | "country-name" | "current-password" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "impp" | "language" | "new-password" | "nickname" | "one-time-code" | "organization" | "organization-title" | "photo" | "postal-code" | "sex" | "street-address" | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local" | "tel-national" | "transaction-amount" | "transaction-currency" | "username"	'off'
autofocus	autofocus	Specifies that the element should automatically get focus when the page loads	boolean	false
datalist	--	A list of search terms to be searched from the input field, it should be used with type="search" input.	string[]	undefined
disabled	disabled	If true, the element is displayed as disabled	boolean	false
icon	icon	An icon displayed at the right of the input	string	undefined
max	max	Specifies the maximum value use it with input type="number" or type="date" Example: max="180", max="2046-12-04"	number	undefined
maxlength	maxlength	Specifies the maximum number of characters allowed in an element use it with input type="number"	number	undefined
min	min	Specifies the minimum value use it with input type="number" or type="date" Example: min="-3", min="1988-04-15"	string	undefined
minlength	minlength	Specifies the minimum number of characters allowed in an element use it with input type="number"	number	undefined
name	name	Is needed to reference the form data after the form is submitted	string	undefined
pattern	pattern	Specifies a regular expression that element's value is checked against	string	undefined
placeholder	placeholder	Specifies a short hint that describes the expected value of the element	string	undefined
readonly	readonly	Specifies that the element is read-only	boolean	false
required	required	Specifies that the element must be filled out before submitting the form	boolean	false
step	step	Specifies the interval between legal numbers in an input field	string	undefined
type	type	Specifies the type of input element	"date" | "email" | "number" | "password" | "search" | "tel" | "text" | "textarea" | "time" | "url"	'text'
value	value	Specifies the value of the input element	number | string	''
variant	variant	Sets the variant of the input field	"error" | "info" | "success" | "warning"	undefined
variantTip	variant-tip	Sets the word(s) of the variant of the input field	string	undefined

Events

Event	Description	Type
blurEvent	Emits a void event when input element is blurred	CustomEvent<void>
changeEvent	Emits an InputChangeEventDetail when the value of the input element changes	CustomEvent<InputValue>
focusEvent	Emits a void event when input element is focused	CustomEvent<void>
inputEvent	Emits a KeyboardEvent when a keboard key is pressed on the focused input element	CustomEvent<InputEvent>

Form support for Safari

To be able to use the form component in Safari, you will need to include this polyfill in your application's dependencies and add it in your main TypeScript file:

import 'element-internals-polyfill'

or in your main HTML file like:

<script type="module">
  import 'element-internals-polyfill'
</script>

---

Built with lit and vite