API Reference

Complete API documentation for components, utilities, and framework core

Components

Form Components

Display Components

Navigation Components

Layout Components

Utility Components

Reference/API/Input

Input

Form input component with validation and messages

🔧 Props

Property	Type	Default	Description
id	string	input-{timestamp}	Unique identifier
label	string	undefined	Field label
type	string	text	Input type
value	van.state<string>	''	Controlled value state
message	object	{}	Message object with code and detail
placeholder	string	''	Placeholder text
required	boolean	false	Required field indicator
oninput	function	undefined	Input change handler
onblur	function	undefined	Blur event handler

💻 Examples

Basic Input

javascript•Basic Input

const email = van.state('');
return Input({
  label: 'Email',
  type: 'email',
  value: email,
  placeholder: 'you@example.com',
  oninput: (e) => email.val = e.target.value
});

▶️ Live Preview

💡 Click "Edit Code" to modify the example

🔄 Click "Apply Changes" to see your modifications

↩️ Click "Reset" to restore original code

With Validation

javascript•With Validation

const email = van.state('');
const message = van.state({});

return Input({
  label: 'Email',
  type: 'email',
  value: email,
  message,
  oninput: (e) => {
    email.val = e.target.value;
    if (!e.target.value.includes('@')) {
      message.val = { code: 'error', detail: 'Invalid email' };
    } else {
      message.val = { code: 'success', detail: 'Valid!' };
    }
  }
});

▶️ Live Preview

💡 Click "Edit Code" to modify the example

🔄 Click "Apply Changes" to see your modifications

↩️ Click "Reset" to restore original code

💡 Usage Tips

• Always provide value state for controlled components

• Use message object with code (type) and detail (text)

• Handle validation in oninput for real-time or onblur for deferred

• Input auto-generates ID if not provided to prevent console errors

🔗 Related

Explore vwf

Discover what vwf can do