Forms
Input controls for collecting user data.
Text Input
Standard text input field.
Code
<input type="text" class="ip-input" placeholder="Enter text...">Textarea
Multi-line text input.
Code
<textarea class="ip-input" rows="3" placeholder="Enter message..."></textarea>Select
Dropdown selection. Use .ip-select-wrapper for custom arrow.
Code
<select class="ip-input">
<option>Select option</option>
<option>Option 1</option>
<option>Option 2</option>
</select>Toggle
On/off switch control.
Code
<label class="ip-toggle">
<input type="checkbox" class="ip-toggle-input" checked>
<div class="ip-toggle-track"><div class="ip-toggle-thumb"></div></div>
<span class="ip-toggle-label">Enabled</span>
</label>Checkbox
Multi-select options.
Code
<label class="ip-checkbox">
<input type="checkbox" class="ip-checkbox-input" checked>
<div class="ip-checkbox-box">
<span class="ip-checkbox-check">✓</span>
</div>
<span class="ip-checkbox-label">Option A</span>
</label>Radio
Single-select options.
Code
<label class="ip-radio">
<input type="radio" name="group" class="ip-radio-input" checked>
<div class="ip-radio-box"><div class="ip-radio-dot"></div></div>
<span class="ip-radio-label">Option 1</span>
</label>Form Group
Structured layout for form fields with labels and helper text.
Choose a unique username
Code
<div class="ip-form-group">
<label class="ip-label">Username <span class="ip-label-required">*</span></label>
<input type="text" class="ip-input" placeholder="Enter username">
<span class="ip-helper">Choose a unique username</span>
</div>
<!-- Horizontal variant -->
<div class="ip-form-group-horizontal">
<label class="ip-label">Email</label>
<input type="email" class="ip-input">
</div>States
Validation states for inputs.
This field is required
Code
<input type="text" class="ip-input ip-input-success" value="Valid">
<input type="text" class="ip-input ip-input-error" value="Invalid">
<span class="ip-error">This field is required</span>