A controllable input box.
<tk-input>
</tk-input>
<hr>
<tk-input
input-type='numeric'
size='small'
step='5'>
</tk-input>
<hr>
<tk-input
input-type='financial'
size='xs'
step='1'
max='10'
min='0'>
</tk-input>
Changing the input-type
prop changes the way the input looks, and also what values can be entered into the component. input-types
of number can also use the step
prop to change how much the stepper arrows change the value.
<tk-input
placeholder='Example placeholder text'>
</tk-input>
<hr>
<tk-input
input-type='numeric'
placeholder='Input your number'>
</tk-input>
Placeholders can be added to the tk-input
to give the user information, this disappears as soon as an input is entered.
<tk-input
value='Prefilled text'>
</tk-input>
<hr>
<tk-input
input-type='numeric'
value='-100.10'>
</tk-input>
The value prop can be used to prefill the input, or to make the tk-input
controlled.
<tk-input
size='xs'
placeholder='xs'>
</tk-input>
<hr>
<tk-input
size='small'
placeholder='small'>
</tk-input>
<hr>
<tk-input
size='medium'
placeholder='medium'>
</tk-input>
<hr>
<tk-input
size='large'
placeholder='large'>
</tk-input>
<hr>
<tk-input
size='xl'
placeholder='xl'>
</tk-input>
The width of the tk-input
can be specified by the size
prop.
<tk-input
error
placeholder="Error state">
</tk-input>
<hr>
<tk-input
disabled
placeholder="Disabled state">
</tk-input>
<hr>
<tk-input
disabled
input-type='financial'
size='xs'
step='1'
max='10'
min='0'>
</tk-input>
<hr>
<tk-input
readonly
placeholder="Readonly state">
</tk-input>
The tk-input
can be in error, disabled, or readonly states.
<tk-input
input-type='numeric'
size='small'
step='1'>
</tk-input>
<hr>
<tk-input
input-type='numeric'
size='small'
step='0.2'
min='0'
max='1'>
</tk-input>
<hr>
<tk-input
input-type='numeric'
size='small'
step='5'>
</tk-input>
The tk-input
can have a stepper, the step
, min
, and max
props affect this. This only works when inputType
is numeric
or financial
, with a step
prop provided.
Property | Required? | Default | Description |
---|---|---|---|
value |
no | The current value of the input, this can be used to prefill data | |
inputType |
no | text |
The input type of this input, can be text , numeric , or financial |
icon |
no | inputType |
This is the name of the icon shown before the input text. This defaults to the icon determined by the inputType |
placeholder |
no | The greyed out prompt text shown when no input is present | |
size |
no | medium |
The width of the input, can be xs , small , medium , large , or xl |
error |
no | Displays the input in a error style | |
disabled |
no | Displays the input in a disabled style, and disables input | |
readonly |
no | Displays the input in a readonly style, and disables input | |
step |
no | This is the step size that determines how much the number changes when a stepper is clicked. This only works when inputType is numeric or financial |
|
min |
no | This is the minimum value which the stepper can go to. This only works when inputType is numeric or financial |
|
max |
no | This is the maximum value which the stepper can go to. This only works when inputType is numeric or financial |
Name | Description |
---|---|
valueChanged |
This event is fired every time the input is changes, it receives a string of what is in the input box |