jcb-input
v1.0.8
Published
form input, with optional label, and error messages
Downloads
3
Readme
Install
npm install jcb-inputUsage example
parcel index.htmlindex.html
<!DOCTYPE html>
<body>
<jcb-input
id="phone-input"
type="text"
name="phone"
label="Téléphone mobile"
placeholder="Ex : 06 50 90 04 72"
value="123"
error-message="Invalid phone number"
></jcb-input>
</body>
<script>
import 'jcb-input'
import "@fontsource/roboto/300.css"
const phoneInput = document.getElementById('phone-input')
// phoneInput.value = "234"
phoneInput.addEventListener('input', event => {
console.log('input', event.target.value)
})
</script>
<style>
:root {
font-family: "Roboto";
font-weight: 300;
}
</style>API references
jcb-input
Attributes
| Name | Type | Default | Description |
| ---------------- |:-------------:|:--------:| -------------------------------------------------|
| type | String | '' | |
| name | String | '' | |
| label | String | '' | |
| value | String | '' | entered text |
| error-message | String | '' | error message |
Events
| Name | Description | Value |
| ---------------------- |---------------------------------------------| ------------------------|
| input | Emitted whenever text is changed | |
CSS variables
| Name | Default | Description |
| ------------------------------------------ |:--------:|---------------------------------------|
| --jcb-input-xxx | xxx | xxx |