Search
Quick Commands
run:diagnostics Run all system checks
db:connect Connect to primary DB
cache:clear Clear application cache
users:list Show all active users
Notifications

Stay on top of recent system events and updates.

  • Notification avatar
    System Update Available

    Version 2.4.1 is ready to install with new features.

    2 minutes ago

  • AB
    New User Registration

    Alex Brown from Canada has joined the platform.

    15 minutes ago

  • Notification avatar
    Backup Completed

    Daily backup has been successfully completed.

    1 hour ago

  • Notification avatar
    Security Alert

    Unusual login activity detected from new location.

    3 hours ago

  • Notification avatar
    Monthly Report Ready

    Your analytics report for September is now available.

    Yesterday

  • MJ
    Server Maintenance

    Scheduled maintenance will begin at 2:00 AM EST.

    2 days ago

Enhanced Select Dropdowns

Vanilla JavaScript select components using Choices.js

Date & Time Pickers

Vanilla JavaScript date and time pickers using Flatpickr

Color & Number Inputs

Native HTML5 and custom input components

Tag Inputs with Use Bootstrap Tag

Chip-style inputs powered by the use-bootstrap-tag plugin. Inputs automatically convert into tag editors and support validation, variants, and transformation. Explore additional examples on the component overview page.

Press Enter or comma to create a chip.
Limit selections by combining data-ub-tag attributes.

CSS Switches

Custom toggle switches using Bootstrap

Basic Switches
Disabled Switches
Custom Labels

Source Code Examples

HTML markup for advanced form elements

Date and Time Pickers

Date and time input fields:

<!-- Date Picker -->
<div class="mb-3">
  <label class="form-label">Select Date</label>
  <input type="date" class="form-control" id="datePicker">
</div>

<!-- Time Picker -->
<div class="mb-3">
  <label class="form-label">Select Time</label>
  <input type="time" class="form-control" id="timePicker">
</div>

<!-- DateTime Local -->
<div class="mb-3">
  <label class="form-label">Date and Time</label>
  <input type="datetime-local" class="form-control" id="dateTimePicker">
</div>
Color Picker

Color input field for selecting colors:

<div class="mb-3">
  <label class="form-label">Choose Color</label>
  <input type="color" class="form-control form-control-color" 
         id="colorPicker" value="#0d6efd" title="Choose your color">
</div>
Range Slider

Range input for selecting values within a range:

<div class="mb-3">
  <label class="form-label">Volume: <span id="volumeValue">50</span></label>
  <input type="range" class="form-range" id="volumeSlider" 
         min="0" max="100" value="50" 
         oninput="document.getElementById('volumeValue').textContent = this.value">
</div>
Custom Number Spinner

Number input with custom increment/decrement buttons:

<div class="mb-3">
  <label class="form-label">Quantity</label>
  <div class="input-group">
    <button class="btn btn-secondary" type="button">-</button>
    <input type="number" class="form-control text-center" 
           value="10" min="0" max="100">
    <button class="btn btn-secondary" type="button">+</button>
  </div>
</div>
Toggle Switches

Bootstrap form switches:

<!-- Basic Switch -->
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="switch1" checked>
  <label class="form-check-label" for="switch1">Enable Notifications</label>
</div>

<!-- Disabled Switch -->
<div class="form-check form-switch">
  <input class="form-check-input" type="checkbox" id="switch2" disabled>
  <label class="form-check-label" for="switch2">Disabled Switch</label>
</div>