Skip to main content

​
Usage

import { Input } from '@kivora/react';

function Demo() {
  const [value, setValue] = useState('');
  
  return (
    <Input 
      label="Email" 
      type="email" 
      value={value}
      onChange={setValue}
      placeholder="[email protected]"
    />
  );
}

​
Props

​
value
string
Controlled value of the input.
​
defaultValue
string
default:"''"
Default value for uncontrolled mode.
​
onChange
(value: string) => void
Called when the input value changes. Receives the string value directly (not the DOM event).
​
placeholder
string
Placeholder text displayed when input is empty.
​
type
string
default:"'text'"
HTML input type attribute (e.g., ‘text’, ‘email’, ‘password’, ‘number’).
​
disabled
boolean
default:"false"
Disables the input and prevents user interaction.
​
readOnly
boolean
default:"false"
Makes the input read-only (value visible but not editable).
​
error
string
Error message to display below the input. When set, applies error styling.
​
label
string
Label text displayed above the input.
​
size
'sm' | 'md' | 'lg'
default:"'md'"
Size variant:
  • sm: h-7, px-2.5, text-xs
  • md: h-9, px-3, text-sm
  • lg: h-11, px-4, text-base
​
className
string
default:"''"
Additional CSS classes to apply to the input element.
​
id
string
HTML ID attribute. Auto-generated if not provided.

​
Examples

​
Basic Input

<Input 
  label="Username" 
  placeholder="Enter username" 
/>

​
With Error State

<Input 
  label="Email" 
  type="email"
  value={email}
  onChange={setEmail}
  error="Please enter a valid email address"
/>

​
Different Sizes

<Input label="Small" size="sm" placeholder="Small input" />
<Input label="Medium" size="md" placeholder="Medium input" />
<Input label="Large" size="lg" placeholder="Large input" />

​
Controlled Search Input

function SearchDemo() {
  const [query, setQuery] = useState('');
  
  return (
    <Input 
      label="Search" 
      value={query} 
      onChange={setQuery} 
      size="sm"
      placeholder="Search..."
    />
  );
}

​
Disabled and Read-Only

<Input label="Disabled" disabled placeholder="Cannot edit" />
<Input label="Read Only" readOnly value="Fixed value" />

​
Notes

  • The onChange callback receives the string value directly, not the DOM event
  • Focus states include a ring effect for accessibility
  • Error state changes border color and displays error message below
  • Auto-generates ID for label association if not provided
  • Supports all standard HTML input attributes via forwarded ref

Build docs developers (and LLMs) love

Get started for freeTalk to us