# Form Components

## Form Group Structure
```html
<div class="form-group">
  <label class="form-label">Email Address</label>
  <input type="email" class="form-control" placeholder="Enter email">
</div>

<!-- With hint -->
<div class="form-group">
  <label class="form-label">Password</label>
  <input type="password" class="form-control">
  <div class="form-hint">Must be at least 8 characters</div>
</div>

<!-- With validation error -->
<div class="form-group">
  <label class="form-label">Username</label>
  <div class="field_with_errors">
    <input type="text" class="form-control">
  </div>
  <div class="form-hint error">Username is required</div>
</div>

<!-- Inverted (dark backgrounds) -->
<div class="form-group inverted">
  <label class="form-label">Email</label>
  <input type="email" class="form-control">
</div>
```

## Form Grid Layout
```html
<div class="form-grid">          <!-- Two columns -->
  <div class="form-group">...</div>
  <div class="form-group">...</div>
</div>

<div class="form-grid single">   <!-- One column -->
  <div class="form-group">...</div>
</div>

<div class="form-grid single narrow">  <!-- Narrow single column -->
  <div class="form-group">...</div>
</div>
```

## Checkboxes
```html
<div class="form-check">
  <input id="check1" type="checkbox">
  <label for="check1">Checkbox</label>
</div>

<div class="form-check sm">
  <input id="check2" type="checkbox">
  <label for="check2">Small Checkbox</label>
</div>

<div class="form-check disabled">
  <input id="check3" type="checkbox" disabled>
  <label for="check3">Disabled</label>
</div>
```

## Radio Buttons
```html
<div class="form-radio">
  <input id="radio1" type="radio" name="group" value="1" checked>
  <label for="radio1">Option 1</label>
</div>
<div class="form-radio">
  <input id="radio2" type="radio" name="group" value="2">
  <label for="radio2">Option 2</label>
</div>
```

## Toggle Switch
```html
<div class="form-toggle">
  <label class="toggle-switch" for="toggle1">
    <input id="toggle1" type="checkbox">
    <span class="slider"></span>
  </label>
  <label class="toggle-switch-label" for="toggle1">Toggle Switch</label>
</div>

<div class="form-toggle sm">
  <label class="toggle-switch" for="toggle2">
    <input id="toggle2" type="checkbox">
    <span class="slider"></span>
  </label>
  <label class="toggle-switch-label" for="toggle2">Small Toggle</label>
</div>
```

## Select Inputs

### Native Select
```html
<select class="form-control">
  <option>Choose an option</option>
  <option value="1">Option 1</option>
</select>
```

### Select2
```html
<div class="form-group form-select">
  <label class="form-label">Select</label>
  <select class="select2" placeholder="Please select">
    <option value="Option 1">Option 1</option>
  </select>
</div>

<div class="form-group multi-select">
  <label class="form-label">Select multiple</label>
  <select class="select2" multiple placeholder="Please select">
    <option>Option 1</option>
  </select>
</div>
```

### Tom Select
```html
<div class="form-group form-select">
  <label class="form-label">Select</label>
  <select class="tom-select" placeholder="Please select">
    <option value=""></option>
    <option value="Option 1">Option 1</option>
  </select>
</div>
```

## Date & Time Picker (Flatpickr)
```html
<div class="form-group">
  <label class="form-label">Select Date</label>
  <div class="form-date">
    <input class="form-control flatpickr" type="date" placeholder="Choose a date">
  </div>
</div>
```

## Selectable Tokens
```html
<ul class="list-inline flex">
  <li class="selectable-token">
    <input id="token1" type="checkbox" checked>
    <label for="token1">
      <span class="icon icon-chrome mr-icon-spacing"></span>
      Chrome
    </label>
  </li>
  <li class="selectable-token">
    <input id="token2" type="checkbox">
    <label for="token2">
      <span class="icon icon-firefox mr-icon-spacing"></span>
      Firefox
    </label>
  </li>
</ul>
```

## Form Card
```html
<div class="form-card">
  <div class="form-card-heading">
    <div class="form-card-title">Form Section</div>
    <div class="form-card-actions">
      <button class="btn btn-square btn-sm btn-primary">
        <span class="icon icon-remove"></span>
      </button>
    </div>
  </div>
  <div class="form-grid">
    <div class="form-group">...</div>
  </div>
</div>
```