Basic Usage

<x-input label="Name" name="name" placeholder="Your name" />

Props

• label - string
• type - string (text, email, password, ...)
• name - string
• id - string|null (defaults to name)
• value - string
• placeholder - string
• size - sm | lg | null
• error - bool + errorMessage
• required - bool
• disabled - bool
• readonly - bool
• icon - string|null (FontAwesome)
• iconPosition - left | right

Sizes

<x-input size="sm" ... />
<x-input ... />
<x-input size="lg" ... />

States

<x-input error errorMessage="Message" />
<x-input disabled />
<x-input readonly />
<x-input required />

Icons

<x-input icon="user" />
<x-input icon="envelope" iconPosition="right" />

Textarea

<x-textarea label="Message" name="msg" placeholder="Your message" />

Textarea Props:

• label - string
• name - string
• id - string|null
• value - string
• placeholder - string
• size - sm | lg | null
• rows - int|null
• cols - int|null
• error - bool + errorMessage
• required - bool
• disabled - bool
• readonly - bool
• hint - string

Color Picker

<x-colorpicker label="Color" name="color" value="#3B82F6" />

Color Picker Props:

• label - string
• name - string
• id - string|null
• value - string (hex color, default: #000000)
• placeholder - string
• size - sm | lg | null
• showPresets - bool (default: true)
• showInput - bool (default: true)
• presets - array|null (custom preset colors)
• format - hex | rgb | hsl (default: hex)
• error - bool + errorMessage
• required - bool
• disabled - bool
• readonly - bool
• hint - string

Features:

• HSL color picker with hue, saturation, and lightness controls
• 15 preset colors (customizable)
• Hex color format support
• Dark mode support
• Interactive Alpine.js integration