Input
The Input component is used to capture user input.
Usage
Here are different types of inputs.
<input-field type="text" required="true" label="Text input label" helper-text="Optional help text" placeholder="Optional placeholder text"></input-field>
<input-field type="text" required="true" variant="outlined" label="Text input label" helper-text="Optional help text" placeholder="Optional placeholder text"></input-field>
<input-field type="password" label="Password" helper-text="Optional help text" placeholder="Optional placeholder text"></input-field>
<input-field type="text" skeleton="true" required="true" label="Text input label" helper-text placeholder="Optional placeholder text"></input-field>
Slots
Fancy larger or smaller input? Add size attribute for additional sizes.
@example.com
<input-field label="Email" type="text" size="lg">
<base-icon slot="start" name="mail"></base-icon>
<div slot="end">@example.com</div>
</input-field>
<input-field type="text" label="Card Number">
<base-icon slot="start" name="credit_card"></base-icon>
<circular-progress slot="end" indeterminate="true"></circular-progress>
</input-field>
States
Disabled
Make input look inactive by adding the disabled boolean attribute to any
<button> element.
<input-field disabled="true">
<base-icon slot="start" class="inherit" name="mail"></base-icon>
<span slot="end">@example.com</span>
</input-field>
Readonly
Make input look inactive by adding the disabled boolean attribute to any
<button> element.
<input-field readonly="true">
<base-icon slot="start" class="inherit" name="mail"></base-icon>
<span slot="end">@example.com</span>
</input-field>
Status
<input-field label="City" error="true" error-text="Please provide a valid city" value="America"></input-field>
<input-field label="City" warning="true" warning-text="Please provide a valid city" value="America"></input-field>
Events
On input change a CustomEvent pc-input--change is triggered by
the element.
<input-field variant="default" id="name-input-field" placeholder="Type here"></input-field>
<script>
document.querySelector('#name-input-field').addEventListener('input', function(event) {
myConsole.log('pc-input--input :: ' + event.target.value);
});
document.querySelector('#name-input-field').addEventListener('change', function(event) {
myConsole.warn('pc-input--change :: ' + event.target.value);
});
</script>
On this page