Kaiko UI Kaiko UI

Input

Stable

Essential form input component with labels, validation states, sizes, and multiple styling variants.

API Reference

Attribute Description Type Default
type HTML input type attribute string "text"
label Field label text shown above the input string ""
icon Lucide icon name rendered inside the input on the left; wraps the input in a label element string ""
color Input border color theme string ""
size Input size variant string "md"
bordered Adds border styling to the input boolean False
ghost Ghost variant with minimal background styling boolean False
disabled Disables the input boolean False
required Marks the field as required and shows an indicator next to the label boolean False
error Single error message text shown below the input string ""
errors List of error message strings list []
hint Helper text shown below the input string ""
validator Enables browser-native constraint validation styling boolean False
validator_hint Hint text shown below the input when validator is active string ""
hx HTMX event integration for server-side reactivity string ""

color

primary secondary accent info success warning error

size

xs sm md lg

Accessibility

Label association: the label prop is rendered as a <label> linked to the input via for/id attributes so screen readers announce the label when the input is focused.

Error messages: errors are linked to the input via aria-describedby so assistive technology announces validation feedback when the field receives focus.

Required indicator: the required prop adds both a visible asterisk and the native required attribute, enabling browser and screen reader announcements.

Examples

Usage 


<c-input label="Full Name" type="text" placeholder="Enter your name" />
<c-input label="Email Address" type="email" placeholder="Enter your email" />

Basic Input 

<c-input label="Full Name" type="text" placeholder="Enter your name" />
<c-input label="Email Address" type="email" placeholder="Enter your email" />

Without Labels

This field is required 
<c-input type="email" placeholder="Email without label" />
<c-input type="text" placeholder="Input with error" error="This field is required" />

Colors 

<c-input label="Primary" color="primary" placeholder="Primary input" />
<c-input label="Success" color="success" value="Valid data" />
<c-input label="Error" color="error" value="Invalid data" />

Sizes 

<c-input label="Extra Small" size="xs" placeholder="xs input" />
<c-input label="Small" size="sm" placeholder="sm input" />
<c-input label="Large" size="lg" placeholder="lg input" />

Variants 

<c-input label="Bordered" bordered placeholder="Bordered input" />
<c-input label="Ghost" ghost placeholder="Ghost input" />

States

Please enter a valid email address
Email is required
Must be a valid email
We will never share your email.
<c-input label="Required Field" required placeholder="This field is required" />
<c-input label="Disabled Field" disabled placeholder="Disabled input" value="Cannot edit" />
<c-input label="With Error" error="Please enter a valid email address" />
<c-input label="With Errors" :errors="['Email is required', 'Must be a valid email']" />
<c-input label="With Hint" hint="We will never share your email." />

Browser Validation 

<c-input label="Email" type="email" validator required
  validator_hint="Enter valid email address" />

<c-input label="Username" type="text" validator required
  pattern="^[a-zA-Z][a-zA-Z0-9\-]{2,29}$"
  validator_hint="3-30 characters, letters/numbers/dash, start with letter" />

Input Types 

<c-input label="Email" type="email" placeholder="user@example.com" />
<c-input label="Password" type="password" placeholder="Enter password" />
<c-input label="Number" type="number" placeholder="123" />
<c-input label="Date" type="date" />