Home
Web Component
Usage
Here are different types of inputs.
<pc-input-url required="true" clearable="true" value="https://shivajivarma.com" label="Text input label" helper-text="Optional help text" placeholder="Optional placeholder text"></pc-input-url>
Sizes
Fancy larger or smaller input? Add size attribute for additional sizes.
<pc-input-url size="lg" placeholder="Large"></pc-input-url>
<pc-input-url placeholder="Medium"></pc-input-url>
<pc-input-url size="sm" placeholder="Small"></pc-input-url>
Events
pc-input--change is triggered by
the element.
document.querySelector('#name-input-field').addEventListener('pc-input--input', function (event) {
myConsole.log('pc-input--input :: ' + event.target.value);
});
document.querySelector('#name-input-field').addEventListener('pc-input--change', function (event) {
myConsole.warn('pc-input--change :: ' + event.target.value);
});