UIKit Components — Live Examples

1. Button Component

const btn = new Button('Click me', () => alert('Clicked!'));

btn.setType('primary');

btn.setSize('medium');

document.body.appendChild(btn.getDOMElement());

2. Input Component

const input = new Input('text', 'Enter text');

input.setValue('Hello');

input.on('change', () => console.log(input.getValue()));

3. Textarea Component

const textarea = new Textarea('Enter message...');

textarea.setRows(4);

textarea.setMaxLength(200);

4. Label + Input (Form Field)

const label = new Label('Username');

const input = new Input('text', 'Enter username');

container.append(label).append(input);

5. DatePicker Component

const datePicker = new DatePicker('Select date');

datePicker.setValue('2026-05-31');

datePicker.setMinDate('2026-01-01');

datePicker.setMaxDate('2026-12-31');

6. Dropdown Component

const dropdown = new Dropdown('Select option');

dropdown.addOption('1', 'Apple');

dropdown.addOption('2', 'Banana');

dropdown.addOption('3', 'Orange');

7. Form Component (with Validation)

const form = new Form();

form.addField('name', { label: 'Name *', required: true });

form.addField('email', { label: 'Email', type: 'email' });

if (form.validate()) { const data = form.getData(); }

8. Grid Component (Table with Sort/Filter/Formatters)

const grid = new Grid();

grid.setHeaders([

  { key: 'name', label: 'Name', sortable: true },

  { key: 'age', label: 'Age', sortable: true },

  { key: 'description', label: 'Description' }

]);

// Custom formatter for age column (color coding)

grid.setFormatter('age', (value, row) => {

  if (value < 25) return '<span style="color: green;">' + value + ' (Young)</span>';

  if (value < 35) return '<span style="color: orange;">' + value + ' (Mid)</span>';

  return '<span style="color: red;">' + value + ' (Senior)</span>';

});

// Multiline content support

grid.setRows([...data]);

9. Panel Component (Container)

const panel = new Panel('Panel Title');

panel.setContent(contentElement);

const btn = new Button('Action', callback);

panel.getFooter().appendChild(btn.getDOMElement());

10. Dialog Component (Modal)

const dialog = new Dialog('Dialog Title');

dialog.setSize('medium'); // small, medium, large

dialog.setContent(content);

document.body.appendChild(dialog.getDOMElement());

dialog.show();

// Or use static methods:

Dialog.alert('Title', 'Message');

Dialog.confirm('Question?', onYes, onNo);

11. Complete CRUD Example (Edit Form in Dialog)

const dialog = new Dialog('Edit Document');

const form = new Form();

form.addField('code', { label: 'Code *', required: true });

form.addField('date', { label: 'Date', type: 'date' });

const supplier = new Dropdown('Select supplier');

supplier.addOption('1', 'Supplier A');

const comment = new Textarea();

comment.setRows(3);

dialog.setContent(form.getDOMElement());

const saveBtn = new Button('Save', async () => {

  if (form.validate()) {

    const data = form.getData();

    await API.docs.update(id, data);

    dialog.close();

  }

});

dialog.getFooter().appendChild(saveBtn.getDOMElement());

Checkbox Component

const checkbox = new Checkbox('Accept terms');

checkbox.setChecked(true);

checkbox.on('change', (e) => console.log(checkbox.isChecked()));

RadioButton Component

const radio = new RadioButton('size');

radio.addOption('small', 'Small');

radio.addOption('medium', 'Medium');

radio.addOption('large', 'Large');

radio.setValue('medium');

Tabs Component

const tabs = new Tabs();

tabs.addTab('tab1', 'Documents', '<p>Documents content</p>', true);

tabs.addTab('tab2', 'References', '<p>References content</p>');

tabs.addTab('tab3', 'Settings', '<p>Settings content</p>');

Link Component

const link = new Link('Click me', '/page');

link.openInNewWindow();

link.on('click', () => console.log('Link clicked'));

Combo Component (Autocomplete)

const combo = new Combo('Search suppliers...');

combo.addOption('1', 'Apple Inc.');

combo.addOption('2', 'Amazon.com');

combo.addOption('3', 'Google LLC');

combo.on('change', (e) => console.log(e.value, e.label));

Async Combo (Server-side Search) ⚡

const asyncCombo = new Combo('Search partners...');

// Setup async search from server

asyncCombo.setAsyncSearch(async (query) => {

  return await API.refs.searchAsync('sprps', query, 20);

});

asyncCombo.setDebounce(300);    // Wait 300ms before search

asyncCombo.setMinChars(2);      // Minimum 2 characters

asyncCombo.on('change', (e) => {

  console.log('Selected:', e.option);

});

List Component

const list = new List();

list.addItem('id1', 'Item 1');

list.addItem('id2', 'Item 2');

list.setMultiSelect(true); // Or false for single select

list.on('select', (e) => console.log(e.item));

Grid - Inline Editing

const grid = new Grid();

grid.setEditable(true); // Enable editing

grid.setEditableColumn('email', true); // Make column editable

grid.setEditableColumn('status', true);

// Double-click cell to edit

// Press Enter to save, Esc to cancel

grid.on('celledit', (e) => console.log(e.column, '=', e.value));

Grid - Column Resizing

const grid = new Grid();

grid.setResizable(true); // Enable resizing

// Drag column border to resize

// Widths persist in columnWidths property

grid.on('columnresize', (e) => console.log(e.column, 'width:', e.width));

Grid - Filtering with Operators

const grid = new Grid();

grid.setFilterable(true); // Enable filter buttons

// Click ⚙️ button on any column header

// Operators: equals, contains, >, <, >=, <=, between

// AND logic: all filters must match

grid.on('filterchange', (e) => {

  console.log('Filters:', grid.getFilters());

});

// Programmatic filtering:

grid.addFilter('age', '>', 25);           // Age > 25

grid.addFilter('name', 'contains', 'John'); // Name contains John

grid.clearFilters();                      // Clear all

Form Validation (Advanced with Triggers)

form.addField('email', {

  label: 'Email',

  type: 'email',

  validators: [

    { type: 'email', message: 'Invalid email' }

  ],

  validationTrigger: 'change' // change|blur|submit

});

form.addField('password', {

  label: 'Password',

  type: 'password',

  validators: [

    { type: 'minLength', min: 8 },

    { type: 'pattern', regex: /[A-Z]/ }

  ],

  validationTrigger: 'blur'

});

Formatters (Number, Date, HTML)

NumberFormatter.format(1234.56, 'USD') => '$1,234.56'

NumberFormatter.format(0.123, 'PCT') => '12.30%'

DateFormatter.format('2026-05-31', 'LONG') => 'May 31, 2026'

DateFormatter.format('2026-05-31', 'DD/MM/YYYY') => '31/05/2026'

StringFormatter.truncate('Long text...', 10) => 'Long text...'