Custom Input Variants Components
Input with right Icon
Preview
Code
Copy
<div class="szi-input__group"> <input type="text" class="szi-input__control" placeholder="Placeholder" /> <span class="addon addon-right"> <i data-lucide="search"></i> </span> </div>
Input with left Icon
Preview
Code
Copy
<div class="szi-input__group"> <span class="addon"> <i data-lucide="user"></i> </span> <input type="text" class="szi-input__control" placeholder="Placeholder" /> </div>
Input with left Icon Right Button
Preview
Code
Button
Copy
<div class="szi-input__group"> <span class="addon"> <i data-lucide="user"></i> </span> <input type="text" class="szi-input__control" placeholder="Placeholder" /> <button class="btn btn-gradient">Button</button> </div>
Input with validation error
Preview
Code
Please enter a valid email address
Copy
<div class="szi-input__group error"> <input type="text" class="szi-input__control" placeholder="Placeholder" /> </div> <p class="error-message">Please enter a valid email address</p>
Input with disabled state
Preview
Code
Copy
<div class="szi-input__group disabled"> <input type="text" class="szi-input__control" placeholder="Placeholder" disabled /> </div>
Input with Add On
Preview
Code
https://
Copy
<div class="szi-input__group"> <span class="addon"> https:// </span> <input type="text" class="szi-input__control" placeholder="Placeholder" /> </div>
Input with Add On Inline
Preview
Code
@saauzi.com
Copy
<div class="szi-input__group"> <input type="text" class="szi-input__control" placeholder="Placeholder" /> <span class="addon addon-inline"> @saauzi.com </span> </div>
Input with left right add on
Preview
Code
https://
@saauzi.com
Copy
<div class="szi-input__group"> <span class="addon addon-inline"> https:// </span> <input type="text" class="szi-input__control" placeholder="Placeholder" /> <span class="addon addon-inline"> @saauzi.com </span> </div>
Input Search Example
Preview
Code
Copy
<div class="szi-input__group"> <span class="addon"> <i data-lucide="search"></i> </span> <input type="text" class="szi-input__control" placeholder="Search" /> <button class="btn btn-icon btn-icon--lg btn-gradient"> <i data-lucide="search"></i> </button> </div>
Input Select
Preview
Code
Label
Select
Select
Select
Copy
<div class="szi-input"> <label class="szi-input__label">Label</label> <select class="szi-input__control"> <option>Select</option> <option>Select</option> <option>Select</option> </select> </div>
Input Number
Preview
Code
Label
Copy
<div class="szi-input"> <label class="szi-input__label">Label</label> <input type="number" placeholder="Input placeholder" class="szi-input__control" /> </div>
Input Textarea
Preview
Code
Label
Copy
<div class="szi-input"> <label class="szi-input__label">Label</label> <textarea class="szi-input__control"> </textarea> </div>
Input Size
Preview
Code
Input Label sm
Input Label md
Input Label lg
Input Label xl
Copy
<div class="szi-input"> <label class="szi-input__label">Input Label sm</label> <input type="text" placeholder="Input placeholder" class="szi-input__control szi-input--sm" /> </div> <div class="szi-input"> <label class="szi-input__label">Input Label md</label> <input type="text" placeholder="Input placeholder" class="szi-input__control szi-input--md" /> </div> <div class="szi-input"> <label class="szi-input__label">Input Label lg</label> <input type="text" placeholder="Input placeholder" class="szi-input__control szi-input--lg" /> </div> <div class="szi-input"> <label class="szi-input__label">Input Label xl</label> <input type="text" placeholder="Input placeholder" class="szi-input__control szi-input--xl" /> </div>
Input Inline
Preview
Code
Input Label sm
Copy
<div class="szi-input szi-input--inline"> <label class="szi-input__label">Input Label sm</label> <input type="text" placeholder="Input placeholder" class="szi-input__control szi-input--sm" /> </div>