A controllable input box. Note: we are currently in the midst of breaking out TkInput into several smaller, more focused components.
This component is deprecated! Please use the new Input Text Field instead.
Old component won’t get updates unless extraordinary circumstances require otherwise → reach out to our PO to discuss it.
New component should always be used unless extraordinary circumstances require otherwise → reach out to our PO to discuss it.
If you are looking to migrate this component and require help, reach out to the #ask-design-system Slack channel.
<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>
<hr>
<tk-input
input-type='numeric'
placeholder='Input your number'
input-text-align='center'>
<span slot="label" class="l-block mb-2x">Center align input placeholder/value</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>
<span slot="label" class="l-block mb-2x">Input with default height</span>
</tk-input>
<hr>
<tk-input height="large">
<span slot="label" class="l-block mb-2x">Input with large height</span>
</tk-input>
<hr>
<div style='height: 72px; margin-bottom: 30px;'>
<tk-input height="fullheight">
<span slot="label" class="l-block mb-2x">Input with full height</span>
</tk-input>
</div>The height of the tk-input can be specified by the height 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
id="password-input"
placeholder="Enter password"
input-type="password">
<span slot="label" class="l-block mb-2x">Enter password</span>
<tk-icon-button slot="input-action-button" type="ghost">
<tk-icon name="eye-slash"></tk-icon>
</tk-icon-button>
</tk-input>
<script>
const input = document.getElementById('password-input');
const actionButton = input.querySelector('tk-icon-button');
const icon = actionButton.querySelector('tk-icon');
actionButton.addEventListener('click', (event) => {
const currentIcon = icon.getAttribute('name');
const currentType= input.getAttribute('input-type')
const newIcon = (currentIcon === 'eye') ? 'eye-slash' : 'eye';
const type = (currentType === 'text') ? 'password' : 'text';
icon.setAttribute('name', newIcon);
input.setAttribute('input-type', type);
});
</script>The tk-input can inject content into the input-action-button slot and render on the right hand side of the input.
<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 value="This is a long text string to showcase how overflow is handled" max-length="80" max-length-type="inline">
<span slot="label" class="l-block mb-2x">Default overflowing text example</span>
</tk-input>
<hr/>
<tk-input value="This is a long text string to showcase how overflow is handled" max-length="80" max-length-type="inline" enable-overflow="true">
<span slot="label" class="l-block mb-2x">Overflowing enabled test example</span>
</tk-input>Setting maxLengthType to ‘inline’ (default is ’legacy’) and specifying maxLength displays an inline character counter. Note that it overrides the legacy character counter, even if it was projected.
Setting enable-overflow to true does not set a hard cap on the maximum number of characters and allows more than the maximum to be entered.
<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.
<tk-input placeholder="Ask a question...">
<span slot="label" class="mb-2x t-medium">Input with Icon</span>
<tk-icon slot="icon" name="ai" />
</tk-input>You can add icons to the input field. See list of icons here.
<tk-input label-id="default-input" prevent-paste="true">
<span slot="label" class="l-block mb-2x">Pasting from clipboard or dropping in text is disabled</span>
</tk-input>When set to true, the user cannot paste text from the clipboard or drop text into the field.
Inputs should use the label slot
The component will then render a <label> above the input and automatically make an association between the two.
The label property can be used to pass an aria-label to the input element.
<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).