Skip to main content

Input

The TkInput component is used to capture text input from the user.

import { TkInput } from '@takeoff-ui/react'

Basic​

A simple TkInput display.

View Code
<TkInput
  label="Text Input"
  mode="text"
  hint="Hint text"
  placeholder="Placeholder text"
  value={value}
  onTkChange={(e) => setValue(e.detail)}
/>

Password​

The input field is visually masked to securely hide the characters entered, providing a standard password entry experience.

View Code
<TkInput 
    label="Password Input" 
    mode="password" 
    value={value}
    onTkChange={(e) => setValue(e.detail)} 
  />
  <TkInput
    label="Password Input With Status Bar"
    mode="password"
    showSafetyStatus
    value={value1}
    onTkChange={(e) => setValue1(e.detail)} 
  />

Counter​

This input field includes a counter feature that allows users to increment or decrement numerical values. The + and - buttons inside the input let users easily adjust the value.

View Code
<TkInput 
    label="Counter Input" 
    mode="counter" 
    value={value}
    onTkChange={(e) => setValue(e.detail)}  
  />

Mask​

The maskOptions prop is used to define masking configurations supported by the Cleave.js library. With this prop, you can specify any masking options described in the Cleave.js documentation (https://nosir.github.io/cleave.js/). For example, you can configure it for formatting dates, phone numbers, or credit card numbers as needed.

View Code
<TkInput
  label="Date Mask"
  placeholder="dd.mm.YYYY"
  maskOptions={{
    date: true,
    delimiter: ".",
    datePattern: ["d", "m", "Y"],
  }}
  value={value}
  onTkChange={(e) => setValue(e.detail)}
/>
<TkInput
  label="Expire Date"
  placeholder="mm/yy"
  maskOptions={{
    date: true,
    datePattern: ["m", "y"],
  }}
  value={value1}
  onTkChange={(e) => setValue1(e.detail)}
/>
<TkInput
  label="Time Formatting"
  placeholder="hh:mm"
  maskOptions={{
    time: true,
    timePattern: ["h", "m"],
  }}
  value={value2}
  onTkChange={(e) => setValue2(e.detail)}
/>
<TkInput
  label="Credit Card"
  placeholder="hh:mm"
  maskOptions={{
    blocks: [4, 4, 4, 4],
    numericOnly: true,
  }}
  value={value3}
  onTkChange={(e) => setValue3(e.detail)}
/>

<TkInput
  label="Letter Only"
  placeholder="xxxxxxxxxx"
  maskOptions={{
    blocks: [40],
    letterOnly: true,
  }}
  value={value4}
  onTkChange={(e) => {
    setValue4(e.detail);
  }}
/>

Size​

The "size" prop can be used with one of the sizes "small", "base", and "large". The default value is "base".

View Code
<TkInput
  label="Small Input"
  size="small"
  value={value}
  onTkChange={(e) => setValue(e.detail)}
/>
<TkInput
  label="Base Input"
  size="base"
  value={value1}
  onTkChange={(e) => setValue1(e.detail)}
/>
<TkInput
  label="Large Input"
  size="large"
  value={value2}
  onTkChange={(e) => setValue2(e.detail)}
/>

Icon​

This example illustrates how to use an icon with the input field.

String Usage - Single

Icon Options Usage - Single

String Icon Usage - Multiple

Icon Options Usage - Multiple

View Code
<div className="flex flex-col">
  <h4>String Usage - Single</h4>
  <div className="flex gap-2">
    <TkInput label="Left Icon" icon="flight" />
    <TkInput label="Right Icon" icon="flight" iconPosition="right" />
  </div>
  <TkDivider />
  <h4>Icon Options Usage - Single</h4>
  <div className="flex gap-2">
    <TkInput label="Left Icon" icon={{ name: 'home', color: 'red', fill: true } as IIconOptions} iconPosition="left" />
    <TkInput label="Right Icon" icon={{ name: 'home', color: 'red', fill: true } as IIconOptions} iconPosition="right" />
  </div>
  <TkDivider />
  <h4>String Icon Usage - Multiple</h4>
  <div className="flex gap-2">
    <TkInput
      label="Multiple Icon"
      icon={
        {
          left: 'key',
          right: 'check_circle',
        } as IMultiIconOptions
      }
      iconPosition="left"
    />
  </div>
  <TkDivider />
  <h4>Icon Options Usage - Multiple</h4>
  <div className="flex gap-2">
    <TkInput
      label="Multiple Icon"
      icon={
        {
          left: { name: 'key', color: 'var(--blue-500)' } as IIconOptions,
          right: { name: 'check_circle', color: 'var(--green-600', fill: true } as IIconOptions,
        } as IMultiIconOptions
      }
      iconPosition="left"
    />
  </div>
</div>

State​

This example illustrates the disabled, readonly, and invalid states of the input field. Each state demonstrates how the input behaves and visually changes in different interaction scenarios.

View Code
<TkInput
  label="Error"
  placeholder="Error"
  invalid={true}
  error="Bu alan zorunludur"
/>
<TkInput
  label="Readonly"
  placeholder="Readonly"
  readonly
/>
<TkInput
  label="Disabled"
  placeholder="Disabled"
  disabled
/>

Clearable​

This example clears the input.

View Code
<TkInput 
    label="Clearable Input" 
    clearable 
    value={value}
    onTkChange={(e) => setValue(e.detail)}
    onTkClearClick={() => setValue(null)}
  />

Chips Mode​

This example illustrates how "chips" mode can be used.

View Code
<TkInput
  label="Chips Mode"
  mode="chips"
  value={value}
  onTkChange={(e) => setValue(e.detail)}
/>

Label with Tooltip​

This example illustrates how to use a tooltip with a label.

Label with tooltip
View Code
<div className="flex flex-col gap-1">
  <div className="flex items-center gap-2 mx-2">
    <div className="text-sm">Label</div>
    <TkTooltip
      header="Tooltip Example?"
      description="Tooltip description example"
      variant="white"
    >
      <TkIcon icon="info" fill variant="info" slot="trigger" />
    </TkTooltip>
  </div>
  <TkInput />
</div>

API​

Props​

NameTypeDefaultDescription
string'label'The key to use for option labels
IChipOptionsnullSets options for all chips rendered in chips mode.
booleanfalseIndicates whether the input can be cleared
booleanfalsethe user cannot interact with the input.
stringnullThis is the error message that will be displayed.
stringnullProvided a hint or additional information about the input.
IIconOptions, IMultiIconOptions, stringnullSpecifies a material icon name to be displayed.
"left", "right"'left'Defines the position of the icon.
booleanfalseIndicates whether the input is in an invalid state
stringnullDefines the label for the input.
IInputMaskOptionsnullThe maskOptions prop is used to define masking configurations supported by the Cleave.js library. With this prop, you can specify any masking options described in the Cleave.js documentation (https://nosir.github.io/cleave.js/). For example, you can configure it for formatting dates, phone numbers, or credit card numbers as needed.
number, stringnullMaximum value for number inputs
number, stringnullMinimum value for number inputs
"chips", "counter", "number", "password", "text"'text'input type
stringnullThe name of the control, which is submitted with the form data.
stringnullPlaceholder text displayed when the input is empty.
stringnullDefines the prefix of the input;
booleanfalseIf true, the user cannot modify the value.
booleanfalseDisplays a red asterisk (*) next to the label for visual emphasis.
booleanfalseif type = password safety status bar visible
"base", "large", "small"'base'Sets size for the component.
stringnullSets step for decimal value with mode number
any[], number, string, string[]nullThe value of the input.

Events​

NameDescription
tk-blurEmitted when the input loses focus.
tk-changeEmitted when the value has changed.
tk-clear-clickEmitted when the clear button has click.
tk-focusEmitted when the input has focus.

Methods​

NameDescription
setFocusSets focus on the specified tk-input. Use this method instead of the global input.focus().

Interfaces​

See cleave.js documentation https://nosir.github.io/cleave.js

interface IInputMaskOptions {
  backspace?: boolean;
  blocks?: number[];
  blocksLength?: number;
  copyDelimiter?: boolean;
  creditCard?: boolean;
  creditCardStrictMode?: boolean;
  creditCardType?: string;
  date?: boolean;
  dateFormatter?: any;
  dateMax?: string;
  dateMin?: string;
  datePattern?: string[];
  delimiter?: string;
  delimiterLazyShow?: boolean;
  delimiterLength?: number;
  delimiters?: any[];
  initValue?: string;
  letterOnly?: boolean;
  lowerCase?: boolean;
  maxLength?: number;
  noImmediatePrefix?: boolean;
  numeral?: boolean;
  numeralDecimalMark?: string;
  numeralDecimalScale?: number;
  numeralIntegerScale?: number;
  numeralPositiveOnly?: boolean;
  numeralThousandsGroupStyle?: string;
  numericOnly?: boolean;
  phone?: boolean;
  phoneFormatter?: any;
  phoneRegionCode?: string;
  prefix?: string;
  prefixLength?: number;
  rawValueTrimPrefix?: boolean;
  result?: string;
  signBeforePrefix?: boolean;
  stripLeadingZeroes?: boolean;
  swapHiddenInput?: boolean;
  tailPrefix?: boolean;
  time?: boolean;
  timeFormat?: string;
  timeFormatter?: any;
  timePattern?: string[];
  uppercase?: boolean;
}