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