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>
<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).