Input

A controllable input box.

Input Type

Default input
Small numeric input
Extra small financial input
<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>

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

Input with placeholder
Numeric input with placeholder
<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>

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

Input with prefilled text
Numeric input with a controlled input
<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>

Description

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

Sizes

Extra small input
Small input
Medium input
Large input
Extra large input
<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>

Description

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

States

Error state
Disabled state
Financial input's disabled state
Read-only state
<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>

Description

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

Stepper

Small numeric input
Small numeric input with a min and max
Smaller numeric input with a step of 5
<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>

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.

Accessibility

  • Inputs should be wrapped in tk-label
  • Labels must use an id and the input should use the aria-labelledby attribute to associate the label with the input

Props

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

Events

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