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.
<tk-input
input-type='numeric'
label='this is a label'
size='small'
step='5'>
</tk-input>When the input is not visually associated with it’s label, an aria-labelledby attribute should be added to the input. You can do that by using the label property. Read more about aria-labelledby on MDN here.
| 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 |
label |
no | Adds an aria-labelledby attribute to the input. |
|
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 |