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>