A controllable input box.
<tk-label id="default-input">
Default input
<tk-input aria-labelledby="default-input">
</tk-input>
</tk-label>
<hr>
<tk-label id="small-numeric-input">
Small numeric input
<tk-input
aria-labelledby="small-numeric-input"
input-type='numeric'
size='small'
step='5'>
</tk-input>
</tk-label>
<hr>
<tk-label id="xs-financial-input">
Extra small financial input
<tk-input
aria-labelledby="xs-financial-input"
input-type='financial'
size='xs'
step='1'
max='10'
min='0'>
</tk-input>
</tk-label>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-label id="input-placeholder">
Input with placeholder
<tk-input
aria-labelledby="input-placeholder"
placeholder='Example placeholder text'>
</tk-input>
</tk-label>
<hr>
<tk-label id="numeric-placeholder">
Numeric input with placeholder
<tk-input
aria-labelledby="numeric-placeholder"
input-type='numeric'
placeholder='Input your number'>
</tk-input>
</tk-label>Placeholders can be added to the tk-input to give the user information, this disappears as soon as an input is entered.
<tk-label id="prefilled-text">
Input with prefilled text
<tk-input
aria-labelledby="prefilled-text"
value='Prefilled text'>
</tk-input>
</tk-label>
<hr>
<tk-label id="numeric-controlled">
Numeric input with a controlled input
<tk-input
aria-labelledby="numeric-controlled"
input-type='numeric'
max-length='8'
value='-100.10'>
</tk-input>
</tk-label>The value prop can be used to prefill the input, or to make the tk-input controlled.
<tk-label id="xs-input">
Extra small input
<tk-input
aria-labelledby="xs-input"
size='xs'
placeholder='xs'>
</tk-input>
</tk-label>
<hr>
<tk-label id="small-input">
Small input
<tk-input
aria-labelledby="small-input"
size='small'
placeholder='small'>
</tk-input>
</tk-label>
<hr>
<tk-label id="medium-input">
Medium input
<tk-input
aria-labelledby="medium-input"
size='medium'
placeholder='medium'>
</tk-input>
</tk-label>
<hr>
<tk-label id="large-input">
Large input
<tk-input
aria-labelledby="large-input"
size='large'
placeholder='large'>
</tk-input>
</tk-label>
<hr>
<tk-label id="xl-input">
Extra large input
<tk-input
aria-labelledby="xl-input"
size='xl'
placeholder='xl'>
</tk-input>
</tk-label>The width of the tk-input can be specified by the size prop.
<tk-label id="input-error-state">
Error state
<tk-input
aria-labelledby="input-error-state"
error
placeholder="Error state">
</tk-input>
</tk-label>
<hr>
<tk-label id="input-disabled-state">
Disabled state
<tk-input
aria-labelledby="input-disabled-state"
disabled
placeholder="Disabled state">
</tk-input>
</tk-label>
<hr>
<tk-label id="financial-input-disabled-state">
Financial input's disabled state
<tk-input
aria-labelledby="financial-input-disabled-state"
disabled
input-type='financial'
size='xs'
step='1'
max='10'
min='0'>
</tk-input>
</tk-label>
<hr>
<tk-label id="input-readonly">
Read-only state
<tk-input
aria-labelledby="input-readonly"
readonly
placeholder="Readonly state">
</tk-input>
</tk-label>The tk-input can be in error, disabled, or readonly states.
<tk-label id="input-small-numeric">
Small numeric input
<tk-input
aria-labelledby="input-small-numeric"
input-type='numeric'
size='small'
step='1'>
</tk-input>
</tk-label>
<hr>
<tk-label id="small-numeric-min-max-input">
Small numeric input with a min and max
<tk-input
aria-labelledby="small-numeric-min-max-input"
input-type='numeric'
size='small'
step='0.2'
min='0'
max='1'>
</tk-input>
</tk-label>
<hr>
<tk-label id="small-numeric-step-5-input">
Smaller numeric input with a step of 5
<tk-input
aria-labelledby="small-numeric-step-5-input"
input-type='numeric'
size='small'
step='5'>
</tk-input>
</tk-label>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-labelid and the input should use the aria-labelledby attribute to associate the label with the input| 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 |
|
maxLength |
no | Specifies the maximum number of characters allowed in the tk-input element |
| Name | Description |
|---|---|
valueChanged |
This event is fired every time the input is changes, it receives a string of what is in the input box |