Input

A controllable input box.

Input Type



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

Description

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.

Placeholder


<tk-input
  placeholder='Example placeholder text'>
</tk-input>
<hr>
<tk-input
  input-type='numeric'
  placeholder='Input your number'>
</tk-input>

Description

Placeholders can be added to the tk-input to give the user information, this disappears as soon as an input is entered.

Prefilled / Controlled


<tk-input
  value='Prefilled text'>
</tk-input>
<hr>
<tk-input
  input-type='numeric'
  value='-100.10'>
</tk-input>

Description

The value prop can be used to prefill the input, or to make the tk-input controlled.

Sizes





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

Description

The width of the tk-input can be specified by the size prop.

States



<tk-input
  error
  placeholder="Error state">
</tk-input>
<hr>
<tk-input
  disabled
  placeholder="Disabled state">
</tk-input>
<hr>
<tk-input
  readonly
  placeholder="Readonly state">
</tk-input>

Description

The tk-input can be in error, disabled, or readonly states.

Stepper



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

Description

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.

Props

Property Required? Default Description
value no The current value of the checkbox, 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
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

Events

Name Description
onChange This event is fired every time the input is changes, it receives a string of what is in the input box