@substrate-system/input
v0.0.25
Published
Input web component
Downloads
1,908
Readme
Input
Inputs with style. Use this web component, and it will forward any relevant
attributes to the inner input element, like an id or name, for example.
aria-* attributes are handled intelligently too.
Install
npm i -S @substrate-system/inputCSS
Import CSS
import '@substrate-system/input/css'Or minified:
import '@substrate-system/input/min/css'Use
This calls the global function customElements.define. Just import, then use
the tag in your HTML.
JS
import { SubstrateInput } from '@substrate-system/input'
// TAG property
document.body.innerHTML += `
<${SubstrateInput.TAG}></${SubstrateInput.TAG}>
`HTML
<div>
<substrate-input></substrate-input>
</div>pre-built
This package exposes minified JS and CSS files too. Copy them to a location that is accessible to your web server, then link to them in HTML.
copy
cp ./node_modules/@substrate-system/input/dist/index.min.js ./public/substrate-input.min.js
cp ./node_modules/@substrate-system/input/dist/style.min.css ./public/substrate-input.cssHTML
<head>
<link rel="stylesheet" href="./substrate-input.css">
</head>
<body>
<!-- ... -->
<script type="module" src="./substrate-input.min.js"></script>
</body>API
Attributes
Component attributes
These are handled by substrate-input directly.
| Attribute | Description |
|-----------|-------------|
| label | Text content for the <label> element rendered above the input. When omitted, no label is rendered. |
| id | Forwarded to the inner <input> element. Removed from the host element. When omitted, a random id is generated for the input. |
input element attributes
These are forwarded directly to the inner <input> element.
accept, alt, autocomplete, autocapitalize, autocorrect,
autofocus, capture, dirname, disabled, enterkeyhint, form,
inputmode, list, max, maxlength, min, minlength, multiple,
name, pattern, placeholder, readonly, required, size,
spellcheck, step, tabindex, title, type, value
ARIA attributes
All ARIA attributes are forwarded to the inner <input> element and
removed from the host element.
aria-activedescendant, aria-atomic, aria-autocomplete,
aria-braillelabel, aria-brailleroledescription, aria-busy,
aria-checked, aria-colcount, aria-colindex, aria-colindextext,
aria-colspan, aria-controls, aria-current, aria-describedby,
aria-description, aria-details, aria-disabled, aria-dropeffect,
aria-errormessage, aria-expanded, aria-flowto, aria-grabbed,
aria-haspopup, aria-hidden, aria-invalid, aria-keyshortcuts,
aria-label, aria-labelledby, aria-level, aria-live, aria-modal,
aria-multiline, aria-multiselectable, aria-orientation, aria-owns,
aria-placeholder, aria-posinset, aria-pressed, aria-readonly,
aria-relevant, aria-required, aria-roledescription, aria-rowcount,
aria-rowindex, aria-rowindextext, aria-rowspan, aria-selected,
aria-setsize, aria-sort, aria-valuemax, aria-valuemin,
aria-valuenow, aria-valuetext
Events
substrate-input does not emit any custom events. All native <input>
events (change, input, focus, blur, etc.) bubble up through the
component as normal.
const el = document.querySelector('substrate-input')
el.addEventListener('input', ev => {
console.log(ev.target.value)
})