Components
Input

Input

The Input component provides a flexible input field that can be customized with various features and styles. It supports prepend and append elements, icons, debouncing, password visibility toggle, and more.

Props

NameTypeDefaultDescription
valuestringThe current value of the input.
onDebounce(value: string) => voidA callback function that fires after the user has stopped typing for a specified debounce timeout.
debounceTimeoutnumber200The debounce timeout in milliseconds for the onDebounce callback.
prependstring | React.ReactElementContent to prepend to the input field.
prefixstring | React.ReactElementContent to be displayed before the input text.
prefixIconstring | React.ReactElementAn icon to display before the input text.
prefixTextstringText to display before the input text.
prefixPlaceholderstringPlaceholder text for the prefix.
suffixstring | React.ReactElementContent to be displayed after the input text.
suffixIconstring | React.ReactElementAn icon to display after the input text. Refer to the
suffixTextstringText to display after the input text.
suffixPlaceholderstringPlaceholder text for the suffix.
appendstring | React.ReactElementContent to append to the input field.
clearablebooleanfalseIf true, a clear button is displayed when there is input text. Clicking it clears the input field.
togglePasswordbooleanfalseIf true, a password visibility toggle button is displayed for password input types.
type"text" | "password" | "number" | "email" | "tel""text"The input type.
size"default" | "large" | "medium" | "small" | "mini""default"The size of the input.
...restPropsVarious HTML input attributes and event handlers.Additional attributes and event handlers passed down to the underlying input element.

Try It

Open on CodeSandboxOpen Sandbox
import { Input, Button } from '@kloktun/uikit'
import DuckIcon from './duck-icon.tsx'
import SearchIcon from './search-icon.tsx'

export default function InputExample() {
  const handleDebounce = (value) => {
    console.log("Debounced value:", value);
  }

  return (
    <div className="flex flex-col gap-4">
      
      <Input placeholder="Enter text" />

      <Input placeholder="Large enter text" size="large" />

      <Input  prefixPlaceholder="https://" append={<Button type="borderless">Save</Button>} />

      <Input suffixText=".com" />

      <Input
        prefixIcon={<DuckIcon />}
        suffixIcon={<SearchIcon />}
      />
      
      <Input
        prefixIcon={<DuckIcon />}
        suffixIcon={<SearchIcon />}
        togglePassword
        type="password"
        onDebounce={handleDebounce}
      />
      
    </div>
  );
}
IconButtonTextarea