Form inputs with sizes, variants, icons, and interactive states.
Default input component
<x-ui::input name="email" placeholder="Enter your email" />The default input size works great for most cases, but here are some additional size options for unique situations.
<x-ui::input name="large" size="lg" placeholder="Large input" />Automatically sized and styled icons for your inputs.
<x-ui::input name="email" icon="envelope" placeholder="Email address" />Search inputs automatically display a clear button when text is entered.
Clear button appears when you type
<x-ui::input name="search" type="search" icon="magnifying-glass" placeholder="Search..." />Password inputs include a toggle to show or hide the password value.
Click the eye icon to toggle visibility
<x-ui::input name="password" type="password" icon="lock-closed" placeholder="Password" />Readonly inputs automatically display a copy button for easy copying.
Click the copy icon to copy the value
<x-ui::input name="token" readonly value="your-api-token-here" />Add a label prop to display a label above the input field.
<x-ui::input name="email" label="Email Address" icon="envelope" placeholder="you@example.com" />Use the variant prop to change the visual style of the input.
<x-ui::input name="filled" variant="filled" placeholder="Filled variant" />Disabled inputs are non-interactive and visually muted.
<x-ui::input name="disabled" disabled value="Disabled input" />