$ui->input()->type("text")->label("A textbox with help")->placeholder("Text")->help("Some help text goes here")->show();
$ui->input()->type("text")->label("Text Disabled")->placeholder("Text Disabled")->disabled()->show();
$ui->textarea()->label("Textarea")->placeholder("Textarea")->show();
$ui->input()->type("text")->label("Input with success")->placeholder("Enter text")->uiType("success")->show();
$ui->input()->type("text")->label("Input with warning")->placeholder("Enter text")->uiType("warning")->show();
$ui->input()->type("text")->label("Input with error")->placeholder("Enter text")->uiType("error")->show();
$ui->checkbox()->label("Checkbox")->show();
$ui->checkbox()->label("Disabled Checkbox")->disabled()->show();
$ui->radio()->label("Radio button")->name("sampleRadio")->checked()->show();
$ui->radio()->label("Another Radio Button")->name("sampleRadio")->show();
$ui->select()->label('Select Box')->name('select_box')->options(array($ui->option()->value('0')->text('Select')->disabled(), $ui->option()->value('1')->text('One'), $ui->option()->value('2')->text('Two'), $ui->option()->value('3')->text('Three'), $ui->option()->value('4')->text('Four')->selected(), $ui->option()->value('5')->text('Five')))->show();
$sampleOptions = array($ui->option()->value('0')->text('Select')->disabled(), $ui->option()->value('1')->text('One'), $ui->option()->value('2')->text('Two'), $ui->option()->value('3')->text('Three'), $ui->option()->value('4')->text('Four')->selected(), $ui->option()->value('5')->text('Five'));
$ui->select()->label('Multiple Select Box')->name('multiple_select_box')->multiple()->options($sampleOptions)->show();
$ui->imagePicker()->label("An image picker")->show();
$ui->datePicker()->label("A date picker")->show();
$ui->timePicker()->label("A time picker")->show();
$ui->slider()->id('slider2')->min('0')->label('A slider')->max('100')->step('1')->grid()->value("15")->show();
$ui->slider()->id('slider1')->label('A ranged slider')->min('0')->max('50000')->step('100')->rangeType()->dataFrom('9000')->dataTo('20000')->prefix('$')->show();
?>
<p>To create input elements with smaller widths, create a <code>Row</code> and place the inputs inside it with their <code>width()</code> property:</p>
<pre>
$inputsRow = $ui->row()->open();
$ui->input()->type("text")->...->width(2)->show();
$ui->select()->...->width(4)->show();
$ui->input()->...->width(6)->show();
$inputsRow->close();
</pre>
<?php
$textRow = $ui->row()->open();
$ui->input()->type("text")->label("Small")->placeholder("Enter text")->width(2)->show();
$ui->select()->label("Medium")->placeholder("Enter text")->width(4)->options($sampleOptions)->show();
$row = $ui->row()->open();
$alertRow = $ui->row()->open();
$marginCol = $ui->col()->width(3)->open();
$marginCol->close();
$alertRow->close();
$margin = $ui->col()->width(2)->open();
$margin->close();
$column = $ui->col()->width(8)->open();
$box = $ui->box()->title('Station Leave Details')->solid()->uiType('primary')->open();
$form = $ui->form()->action('leave/leave_station/applyStationLeave')->open();
$inputRow1 = $ui->row()->open();
$ui->datePicker()->required()->label('Proposed Date Of Leaving Station ')->name('leave_st_date')->id('leave_st_date')->placeholder("Enter the date")->dateFormat('dd-mm-yyyy')->value("")->width(6)->show();
$ui->datePicker()->required()->id('return_st_date')->label('Proposed Date Of Reurning Station')->name('return_st_date')->placeholder(" Select Returning Date")->dateFormat('dd-mm-yyyy')->width(6)->value("")->show();
$inputRow1->close();
$inputRow2 = $ui->row()->id('st_time')->open();
$ui->timePicker()->label('Leaving Time')->name('st_leaving_time')->addonLeft($ui->icon("clock-o"))->uiType('primary')->id('st_leaving_time')->showMeridian('false')->required()->showSeconds('true')->width(6)->show();
$ui->timePicker()->label('Arrival Time')->name('st_arrival_time')->addonLeft($ui->icon("clock-o"))->uiType('primary')->id('st_arrival_time')->showMeridian('false')->required()->showSeconds('true')->width(6)->show();
$inputRow2->close();
$inputRow3 = $ui->row()->open();
$ui->textarea()->required()->placeholder('Purpose Of Leaving station')->type('text')->value("")->label('Purpose Of Leaving station')->name('purpose')->width(6)->show();
$ui->textarea()->required()->placeholder(' Address During Absence From Station')->type('text')->value("")->label('Address During Absence From Station')->id('st_address')->name('address')->width(6)->show();
$inputRow3->close();
$box1 = $ui->box()->title('Please Select Approving Employee')->solid()->id('approving_emp')->uiType('primary')->open();
$inputRow4 = $ui->row()->open();
$ui->select()->label('Department Type')->name('type')->id('type')->required()->options(array($ui->option()->value('""')->text('Select')->selected(), $ui->option()->value('academic')->text('Academic'), $ui->option()->value('nonacademic')->text('Non Academic')))->width(6)->show();
$ui->select()->label('Select Department')->name('department_name')->id('department_name')->required()->options(array($ui->option()->value('""')->text('Select')))->width(6)->show();
$inputRow4->close();
$inputRow5 = $ui->row()->open();
$ui->select()->label('Designation')->name('designation')->id('designation')->required()->options(array($ui->option()->value('""')->text('Select')))->width(6)->show();
$ui->select()->label('Employee Name')->name('emp_name')->id('emp_name')->required()->options(array($ui->option()->value('""')->text('Select')->selected()))->width(6)->show();
$inputRow5->close();
