Form
Form elements with glassmorphism design
Input
HTML
<div class="bl-form-group">
<label class="bl-form-label" for="email">Email</label>
<input type="email" id="email" class="bl-input" placeholder="name@example.com">
</div>
Textarea
HTML
<div class="bl-form-group">
<label class="bl-form-label" for="message">Message</label>
<textarea id="message" class="bl-textarea" rows="4"></textarea>
</div>
Select
HTML
<div class="bl-form-group">
<label class="bl-form-label" for="select">Selection</label>
<select id="select" class="bl-select">
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
Checkbox & Radio
HTML
<label class="bl-checkbox">
<input type="checkbox">
<span>Checkbox Option</span>
</label>
<label class="bl-radio">
<input type="radio" name="radio" value="1">
<span>Radio Option 1</span>
</label>
Form Helper & Error
This is helper text
This is an error text
HTML
<div class="bl-form-group">
<label class="bl-form-label">With Helper Text</label>
<input type="text" class="bl-input">
<span class="bl-form-helper">Helper text</span>
</div>
<div class="bl-form-group">
<label class="bl-form-label">With Error</label>
<input type="text" class="bl-input bl-input-error">
<span class="bl-form-error">Error text</span>
</div>