A controllable input box. Note: we are currently in the midst of breaking out TkInput into several smaller, more focused components.
<tk-input label-id="default-input">
<span slot="label" class="l-block mb-2x">Default input</span>
</tk-input>
<hr>
<tk-input
input-type='numeric'
size='small'
step='5'>
<span slot="label" class="l-block mb-2x">Small numeric input</span>
</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. Note: the input-type of financial
is deprecated. Please use the TkInputFinancial
component instead.
<tk-input
placeholder='Example placeholder text'>
<span slot="label" class="l-block mb-2x">Input with placeholder</span>
</tk-input>
<hr>
<tk-input
input-type='numeric'
placeholder='Input your number'>
<span slot="label" class="l-block mb-2x">Numeric input with placeholder</span>
</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'
is-filled="true">
<span slot="label" class="l-block mb-2x">Input with prefilled text</span>
</tk-input>
<hr>
<tk-input
input-type='numeric'
max-length='8'
value='-100.10'
is-filled="true">
<span slot="label" class="l-block mb-2x">Numeric input with a controlled input</span>
</tk-input>
<hr>
<tk-input
error
value="Prefilled text"
is-filled="true">
<span slot="label" class="l-block mb-2x">Input with prefilled text that contains error</span>
</tk-input>
<hr>
<tk-input
disabled
is-filled="true"
value="Prefilled text">
<span slot="label" class="l-block mb-2x">Disabled Input with prefilled text</span>
</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'>
<span slot="label" class="l-block mb-2x">Extra small input</span>
</tk-input>
<hr>
<tk-input
size='small'
placeholder='small'>
<span slot="label" class="l-block mb-2x">Small input</span>
</tk-input>
<hr>
<tk-input
size='medium'
placeholder='medium'>
<span slot="label" class="l-block mb-2x">Medium input</span>
</tk-input>
<hr>
<tk-input
size='large'
placeholder='large'>
<span slot="label" class="l-block mb-2x">Large input</span>
</tk-input>
<hr>
<tk-input
size='fullwidth'
placeholder='fullwidth'>
<span slot="label" class="l-block mb-2x">Extra large input</span>
</tk-input>
The width of the tk-input
can be specified by the size
prop.
<tk-input
error
placeholder="Error state">
<span slot="label" class="l-block mb-2x">Error state</span>
</tk-input>
<hr>
<tk-input
disabled
placeholder="Disabled state">
<span slot="label" class="l-block mb-2x">Disabled state</span>
</tk-input>
<hr>
<tk-input
readonly
placeholder="Readonly state">
<span slot="label" class="l-block mb-2x">Read-only state</span>
</tk-input>
The tk-input
can be in error, disabled, or readonly states.
<tk-input
input-type='numeric'
size='small'
step='1'>
<span slot="label" class="l-block mb-2x">Small numeric input</span>
</tk-input>
<hr>
<tk-input
input-type='numeric'
size='small'
step='0.2'
min='0'
max='1'>
<span slot="label" class="l-block mb-2x">Small numeric input with a min and max</span>
</tk-input>
<hr>
<tk-input
input-type='numeric'
size='small'
step='5'>
<span slot="label" class="l-block mb-2x">Smaller numeric input with a step of 5</span>
</tk-input>
The tk-input
can have a stepper, the step
, min
, and max
props affect this. This only works when inputType
is numeric
, with a step
prop provided. If using a currency (financial) input, please use tk-input-financial
.
<tk-input>
<span slot="hint" class="l-inline-flex l-v-center">
<tk-icon name="heart" size="xs" class="mr-1x" variant="filled"></tk-icon>
Enter your text to see the hint
</span>
<span slot="label" class="l-block mb-2x">Hint</span>
</tk-input>
<hr>
<tk-input error value="Hint with an error">
<span slot="hint" class="l-inline-flex l-v-center">
<tk-icon name="bell" size="xs" class="mr-1x"></tk-icon>
See a hint with an error
</span>
<span slot="label" class="l-block mb-2x">Hint with an error</span>
</tk-input>
The tk-input
renders a hint containing any content injected into the hint
slot, when supplied. When the error
prop is also true, the hint is rendered in error state, aria-invalid="true"
is added to the input
and the aria-errormessage
value of the input
is set to the id of the tk-hint
.
<tk-input value="">
<tk-character-counter
text=""
count-down="true"
max-length="25"
slot="character-counter"
></tk-character-counter>
<span slot="label" class="l-block mb-2x">Input with a Character Counter</span>
</tk-input>
<hr>
<tk-input value="" error>
<span slot="hint" class="l-inline-flex l-v-baseline">
<tk-icon name="alert" size="xs" class="mr-1x"></tk-icon>
Please enter text above all others
</span>
<tk-character-counter
text=""
count-down="true"
max-length="25"
slot="character-counter"
></tk-character-counter>
<span slot="label" class="l-block mb-2x">Input Error with a Character Counter</span>
</tk-input>
The tk-input
renders any content injected into the character-counter
slot underneath and to the right-hand side of the input. As the name suggests, the intended slot content is a tk-character-counter
component. The counter will be inline with the hint, if one is provided.
<tk-input>
<span slot="label" class="mb-2x t-medium">Text Area With Medium Label</span>
</tk-input>
<hr/>
<tk-input>
<span slot="label" class="mb-2x t-large">Text Area With Large Label</span>
</tk-input>
You can use our typography utilities to set the size of the labels.
Inputs should use the label
slot
The component will then render a <label>
above the input and automatically make an association between the two.
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
disabled |
disabled |
Displays the input in a disabled style, and disables input. | boolean |
false |
error |
error |
Displays the input in a error style. | boolean |
false |
icon |
icon |
This is the name of the icon shown before the input text. This defaults to the icon determined by the inputType . |
string |
undefined |
inputType |
input-type |
The input type of this input, can be text or numeric . The financial inputType has been deprecated in favor of TkInputFinancial component. |
"financial" | "numeric" | "text" |
'text' |
inputValidation |
– | (value: string) => boolean |
undefined |
|
isFilled |
is-filled |
Returns true if the input is prefilled and false to display an outline style. | boolean |
false |
keyboardType |
keyboard-type |
"decimal" | "email" | "numeric" | "search" | "tel" | "text" | "url" |
undefined |
|
labelSize |
label-size |
Deprecated! Please use the label slot instead. Changes the size of the label, can be set to either medium or large . |
string |
undefined |
labelText |
label-text |
Deprecated! Please use the label slot instead. If present, the value of this prop is rendered inside a <label> above the input. |
string |
undefined |
max |
max |
This is the maximum value which the stepper can go to. This only works when inputType is numeric . |
number |
Infinity |
maxLength |
max-length |
Specifies the maximum number of characters allowed in the tk-input element. |
number |
undefined |
min |
min |
This is the minimum value which the stepper can go to. This only works when inputType is numeric . |
number |
-Infinity |
placeholder |
placeholder |
The greyed out prompt text shown when no input is present. | string |
undefined |
readonly |
readonly |
Displays the input in a readonly style, and disables input. | boolean |
false |
size |
size |
The width of the input. | "fullwidth" | "large" | "medium" | "small" | "xs" |
'medium' |
step |
step |
This is the step size that determines how much the number changes when a stepper is clicked. This only works when inputType is numeric . For financial input, use TkInputFinancial . |
number |
undefined |
value |
value |
The current value of the input, this can be used to prefill data. | string |
'' |
Event | Description | Type |
---|---|---|
valueChanged |
This event is fired every time the input is changes, it receives a string of what is in the input box. | CustomEvent<string> |
focusComponent() => Promise<void>
Type: Promise<void>
<tk-input-financial
id="inputFinancialExample1"
class="mb-2x l-block"
placeholder="5"
max-value="300"
min-value="10"
required
value="300"
unit="decimalPeriod"
>
<span slot="label">Loan amount</span>
<tk-hint slot="hint">Roughly how much would you like to borrow?</tk-hint>
</tk-input-financial>
<!-- for demo only -->
<tk-highlight id="inputFinancialExampleOutput1"
></tk-highlight>
<hr>
<!-- end demo -->
<tk-input-financial
id="inputFinancialExample2"
placeholder="10"
step="5"
>
<span slot="label">Loan amount</span>
<tk-hint slot="hint">Enter an amount in increments of $5.</tk-hint>
</tk-input-financial>
<!-- for demo only -->
<tk-highlight id="inputFinancialExampleOutput2"
></tk-highlight>
<hr>
<!-- end demo -->
<tk-input-financial
class="l-block mb-2x"
id="inputFinancialExample3"
currency="JPY"
>
<span slot="label">Contributor payment</span>
</tk-input-financial>
<!-- for demo only -->
<tk-highlight
id="inputFinancialExampleOutput3"
></tk-highlight>
<script>
const displayInputFinancialEventChange = (outputElement, amount) => {
outputElement.innerText = `📣 valueChanged emitted: ${amount}`;
}
inputFinancialExample1.addEventListener('valueChanged', ($event) => displayInputFinancialEventChange(inputFinancialExampleOutput1, $event.detail));
inputFinancialExample2.addEventListener('valueChanged', ($event) => displayInputFinancialEventChange(inputFinancialExampleOutput2, $event.detail));
inputFinancialExample3.addEventListener('valueChanged', ($event) => displayInputFinancialEventChange(inputFinancialExampleOutput3, $event.detail));
</script>
<!-- end demo -->
An input for displaying and interacting with monetary values.
Note: This is our first input to be extracted out of TkInput
and into its own component. There will be more soon.
<tk-input-financial
class="mb-2x l-block"
status="disabled"
value="300"
>
<span slot="label">Financial input's disabled state</span>
<tk-hint slot="hint">The status prop is set to disabled.</tk-hint>
</tk-input-financial>
The tk-input-financial
can have a status of disabled, error, or ready (default).
This component will receive a different set of styles based on the active --tk-theme
CSS property.
To receive theme styling: make sure to set the desired value for this property inside of the :root
selector.
These styles are not ready for production, so they cannot be used in Orders
Property | Attribute | Description | Type | Default |
---|---|---|---|---|
currency |
currency |
Determines which currency symbol (ex: £ ) to display. |
ISO_CODE.ANG | ISO_CODE.ARS | ISO_CODE.AUD | ISO_CODE.BTC | ISO_CODE.CAD | ISO_CODE.CNY | ISO_CODE.EUR | ISO_CODE.GBP | ISO_CODE.HKD | ISO_CODE.JPY | ISO_CODE.MXN | ISO_CODE.NZD | ISO_CODE.SGD | ISO_CODE.USD | ISO_CODE.XCD | ISO_CODE.XPF |
ISO_CODE.USD |
maxValue |
max-value |
Max value (ceiling) for the input. The stepper will not allow going above this value. If the user manually inputs a number higher than this value, it will display an error. | number |
Infinity |
minValue |
min-value |
Minimum value (floor) for the input. The stepper will not allow going below this value. If the user manually inputs a number lower than this value, it will display an error. | number |
0 |
placeholder |
placeholder |
Optional text to show when the input is empty. Should not be used in place of a label. | string |
undefined |
readonly |
readonly |
Sets the input to readonly which makes it non-editable. |
boolean |
false |
required |
required |
Sets whether the field is required. Displays a red border and error message when the field is empty. Useful for form validation. | boolean |
false |
status |
status |
Sets the input validity and interactivity. When disabled , it is not editable. When it is has a status of error , it gives the input a red border. |
"disabled" | "error" | "ready" |
'ready' |
step |
step |
Specifies the granularity that the value must adhere to. For example, if the step is set to 5 , then the stepper will increment the value to 10 → 15 → 20 until it hits its ceiling (maxValue ). |
number |
1 |
unit |
unit |
Determines if decimals should be supported, and which keyboard to present on touchscreen devices. If the unit is set to decimalPeriod or decimalComma , then the input step will be set to .01 . This is a limitation of how the browser handles stepMismatch validation. |
"decimalComma" | "decimalPeriod" | "whole" |
'whole' |
value |
value |
Sets the value for the input. Will prefill the input if set on load. | number |
undefined |
Event | Description | Type |
---|---|---|
valueChanged |
Emits the new value when an input’s value is changed and is valid. | CustomEvent<number> |