Documentation

Input

A text input field with optional label, helper text, and error state support.

Examples

Interactive Playground

import { Input } from 'kalki-design'

<Input></Input>

With Error

Invalid email format

import { Input } from 'kalki-design'

export default function Example() {
  return (
    <Input
      label="Email address"
      placeholder="hello@example.com"
      error="Invalid email format"
    />
  )
}

Disabled

import { Input } from 'kalki-design'

export default function Example() {
  return (
    <Input
      label="Email address"
      placeholder="hello@example.com"
      disabled
    />
  )
}

Installation

npx kalki-design add input

Usage

import { Input } from 'kalki-design'

export default function Example() {
  return <Input />
}

API Reference

NameTypeDefaultDescription
NamelabelTypestringDefault—DescriptionAccessible label rendered above the input.
NameplaceholderTypestringDefault—DescriptionPlaceholder text displayed when the input is empty.
NamesizeType'sm' | 'md' | 'lg'Default'md'DescriptionHeight of the input field: sm (28px), md (32px), lg (36px).
NameerrorTypestring | booleanDefault—DescriptionError state. Pass a string for an error message or true to apply error styling.
NamehelperTextTypestringDefault—DescriptionSupplementary text displayed below the input.
NamedisabledTypebooleanDefaultfalseDescriptionPrevents interaction and applies muted styling.