Back to top

Examples: Horizontal Layout

If layout is set to horizontal a horizontal form is rendered. 

<?php $form = ActiveForm::begin(['layout' => 'horizontal']) ?>

Here by default the template is set to {label} {beginWrapper} {input} {error} {endWrapper} {help}, which will use 3 columns, one for label (col-sm-3), input (col-sm-6) and help text (col-sm-3) each. Error messages get rendered below the input. The column arrangement can easily be changed, though (see below).

Following is a list of the most common form elements to exemplify different options and validation states.

Default Options

Error state:

Demolabel cannot be blank.
Demolabel cannot be blank.
<?php $form = ActiveForm::begin() ?>
    <?= $form->field($model, 'demo'); ?>
    <?= $form->field($model, 'demo')->checkbox(); ?>
<?php ActiveForm::end(); ?>

Hint

Hint text
Hint text

Error state:

Demolabel cannot be blank.
Hint text
Demolabel cannot be blank.
Hint text
<?php $form = ActiveForm::begin() ?>
    <?= $form->field($model, 'demo')->hint('Hint text'); ?>
<?php ActiveForm::end(); ?>

Placeholder

Error state:

Demolabel cannot be blank.
<?php $form = ActiveForm::begin() ?>
    <?= $form->field($model, 'demo', [
        'inputOptions' => [
            'placeholder' => 'Placeholder',
        ],
    ]); ?>
<?php ActiveForm::end(); ?>

Disabled Label

Error state:

Demolabel cannot be blank.
<?php $form = ActiveForm::begin() ?>
    <?= $form->field($model, 'demo', [
        'inputOptions' => [
            'placeholder' => $model->getAttributeLabel('demo')
        ],
    ])->label(false); ?>
<?php ActiveForm::end(); ?>

Column Sizing

Hint Text
Hint Text

Error state:

Demolabel cannot be blank.
Hint Text
<?php $form = ActiveForm::begin() ?>
    <?= $form->field($model, 'demo', [
        'horizontalCssClasses' => [
            'wrapper' => 'col-sm-2',
        ]
    ])->hint('Hint Text') ?>
    <?= $form->field($model, 'demo', [
        'horizontalCssClasses' => [
            'wrapper' => 'col-sm-4',
        ]
    ])->hint('Hint Text') ?>
<?php ActiveForm::end(); ?>

List Controls

Hint Text
<?php $form = ActiveForm::begin() ?>
    <?= $form->field($model, 'demo')->dropDownList($items) ?>
    <?= $form->field($model, 'demo')->checkboxList($items) ?>
    <?= $form->field($model, 'demo')->label(false)->checkboxList($items) ?>
    <?= $form->field($model, 'demo')->hint('Hint Text')->radioList($items) ?>
<?php ActiveForm::end(); ?>

Inline Lists

Hint Text
Demolabel cannot be blank.
Demolabel cannot be blank.
Hint Text
<?php $form = ActiveForm::begin() ?>
    <?= $form->field($model, 'demo')->inline()->checkboxList($items) ?>
    <?= $form->field($model, 'demo')->hint('Hint Text')->inline()->radioList($items) ?>
<?php ActiveForm::end(); ?>

Custom Inputs

@
@.00
<?php $form = ActiveForm::begin() ?>
    <?= $form->field($model, 'demo', [
        'inputTemplate' => '<div class="input-group"><span class="input-group-addon">@</span>{input}</div>',
    ]); ?>
    <?= $form->field($model, 'demo', [
        'inputTemplate' => '<div class="input-group"><span class="input-group-addon">@</span>{input}'.
            '<span class="input-group-addon">.00</span></div>',
    ]); ?>
    <?= $form->field($model, 'demo', [
        'inputTemplate' => '<div class="input-group"><span class="input-group-addon">'.
            Html::checkbox('test').'</span>{input}</div>',
    ]); ?>
    <?= $form->field($model, 'demo', [
        'inputTemplate' => '<div class="input-group"><span class="input-group-btn">'.
            '<button class="btn btn-default">Go!</button></span>{input}</div>',
    ]); ?>
    <?php $menu = Menu::widget([
        'options' => [
            'class'=>'dropdown-menu',
        ],
        'items' => [
            ['label' => 'Action', 'url' => '#'],
            ['label' => 'Another Action', 'url' => '#'],
            ['options' => ['class'=>'divider']],
            ['label' => 'Separated Link', 'url' => '#'],
        ],
    ]); ?>
    <?= $form->field($model, 'demo', [
        'inputTemplate' => '<div class="input-group"><div class="input-group-btn">'.
            '<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">Action '.
            '<span class="caret"></span></button>'.$menu.'</div>{input}</div>',
    ]); ?>
    <?= $form->field($model, 'demo', [
        'inputTemplate' => '<div class="input-group"><div class="input-group-btn">'.
            '<button class="btn btn-default">Action</button>'.
            '<button class="btn btn-default dropdown-toggle" data-toggle="dropdown">'.
            '<span class="caret"></span></button>'.$menu.'</div>{input}</div>',
    ]); ?>
<?php ActiveForm::end(); ?>

Custom Columns

<?php $form = ActiveForm::begin([
    'layout' => 'horizontal',
    'template' => "{label}\n{beginWrapper}\n{input}\n{hint}\n{error}\n{endWrapper}",
    'fieldConfig' => [
        'horizontalCssClasses' => [
            'label' => 'col-sm-4',
            'offset' => 'col-sm-offset-4',
            'wrapper' => 'col-sm-8',
            'error' => '',
            'hint' => '',
        ],
    ],
]) ?>
<?php ActiveForm::end(); ?>
Hint Text

Error state:

Hint Text
Demolabel cannot be blank.
Demolabel cannot be blank.
Demolabel cannot be blank.
Demolabel cannot be blank.
<?php $form = ActiveForm::begin() ?>
    <?= $form->field($model, 'demo')->hint('Hint Text'); ?>
    <?= $form->field($model, 'demo')->dropDownList($items); ?>
    <?= $form->field($model, 'demo')->checkboxList($items); ?>
    <?= $form->field($model, 'demo')->checkbox(); ?>
<?php ActiveForm::end(); ?>