$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();
$ui->input()->type("text")->label("Large input")->placeholder("Enter text")->width(6)->show();