Input
The input component is a wrapper to the HTML input element with custom styling and additional functionality.
<Input placeholder="An input" inputType="text" value="" />
<Input placeholder="Enter ICP amount" inputType="icp" value={12.09878976} />
<Input placeholder="Enter ETH" inputType="currency" decimals={18} bind:value={myAmount} />Properties
| Property | Description | Type | Default |
|---|---|---|---|
name | HTML input name field. | string | |
inputType | HTML input type field extended with a custom icp type. | text or number or icp or currency | number |
required | HTML input required field. | boolean | true |
spellcheck | HTML input spellcheck field. | boolean or undefined | undefined |
step | HTML input step field. | number or any or undefined | undefined |
disabled | HTML input disabled field. | boolean | false |
minLength | HTML input minlength field. | number or undefined | undefined |
max | HTML input max field. | number or undefined | undefined |
value | HTML input value field. | string or number or undefined | undefined |
placeholder | HTML input placeholder field. | string | |
autocomplete | HTML input autocomplete field. | off or on or undefined | undefined |
decimals | Can be used together with the inputType set as currency type to define a particular number of decimals supported by the input field. | number | 8 |
showInfo | Display additional information related to the input. Should be used in addition to slots. | boolean | false |
testId | Add a data-tid attribute to the DOM, useful for test purpose. | string or undefined | undefined |
ignore1Password | Tell 1Password it should ignore the field (Reference: 1Password documentation) | boolean | true |
Notes
If the inputType is set to icp, the value bind by the component is a number. On the contrary, if bind to currenty, the value is a string. This to avoid issue with scientific notation enforced by JavaScript. It is then up to you to parse the currency according your need, for example to bigint or BigNumber.
Slots
| Slot name | Description |
|---|---|
start | An addition before the label (e.g. an action related to the input). Need to be activated with the property showInfo. |
label | A label related to the input. Need to be activated with the property showInfo. |
end | An addition after the label (e.g. an action related to the input). Need to be activated with the property showInfo. |
inner-end | An addition displayed within the input (e.g. an action related to the input). |
Both slots are displayed flex with space-between.
Showcase
Amount:
More