use kartik\helpers\Html;
use kartik\form\ActiveForm;
<div class="card p-3">
    <?php
    $form = ActiveForm::begin(['formConfig' => ['showLabels' => false]]);
    ?>
    <div class="row">
        <div class="col-sm-4 col-6">
            <?= $form->field($model, 'image')->input('color', ['class' => 'default-color'])->hint('Color picker input (default style).') ?>
        </div>
        <div class="col-sm-4 col-6">
            <?= $form->field($model, 'color_1')->input('color', ['class' => 'form-control-color'])->hint('Color picker input (bootstrap style).') ?>
        </div>
        <div class="col-sm-4 col-12">
            <?= $form->field($model, 'color')->widget(ColorInput::class, ['options' => ['placeholder' => 'Enter scale 1-10...']])->hint('Color picker input (advanced Colorinput widget by Krajee).') ?>
        </div>
    </div>
    <hr style="margin-top:0">
    <div class="row">
        <div class="col-sm-4 col-6">
            <?= $form->field($model, 'brightness')->input('range', ['class' => 'default-range', 'min' => 0, 'max' => 100, 'step' => 1, 'placeholder' => 'Enter scale 0-100...'])->hint('Range input (default style).') ?>
        </div>
        <div class="col-sm-4 col-6">
            <?= $form->field($model, 'contrast')->input('range', ['class' => 'form-range', 'min' => 0, 'max' => 100, 'step' => 1, 'placeholder' => 'Enter scale 0-100...'])->hint('Range input (bootstrap style).') ?>
        </div>
        <div class="col-sm-4 col-12">
        <?=
        $form->field($model, 'hue')->widget(RangeInput::class, [
            'html5Options' => ['min' => 0, 'max' => 100, 'step' => 1, 'style' => 'min-width: 120px'],
            'options' => ['placeholder' => 'Adjust...', 'class' => 'text-center'],
            'addon' => [
                'prepend' => ['content' => '<span class="text-danger">0%</span>'],
                'preCaption' => '{$preCaption}',
                'append' => ['content' => '%']
            ]
        ])->hint('Range input (advanced RangeInput widget by Krajee).') ?>
        </div>
    </div>
    <hr style="margin-top:0">
    <div class="row">
        <div class="col-sm-4">
            <?= $form->field($model, 'birthday')->input('date', ['placeholder' => 'Enter a valid date...'])->hint('Date picker input.') ?>
        </div>
        <div class="col-sm-4">
            <?= $form->field($model, 'month')->input('month', ['placeholder' => 'Enter a valid month...'])->hint('Month picker input.') ?>
        </div>
        <div class="col-sm-4">
            <?= $form->field($model, 'week')->input('week', ['placeholder' => 'Enter a valid week...'])->hint('Week picker input.') ?>
        </div>
    </div>
    <hr style="margin-top:0">
    <div class="row">
        <div class="col-sm-4">
            <?= $form->field($model, 'end_time')->input('datetime-local', ['placeholder' => 'Enter a valid date-time...'])->hint('Local date time picker input (no time zone).') ?>
        </div>
        <div class="col-sm-4">
            <?= $form->field($model, 'event_time')->input('time', ['placeholder' => 'Enter a valid time...'])->hint('Time picker input.') ?>
        </div>
        <div class="col-sm-4">
            <?= $form->field($model, 'rating')->input('number', ['min' => 1, 'max' => 10, 'step' => 1, 'placeholder' => 'Enter rating 1-10...'])->hint('Number input with step/spinner functionality.') ?>
        </div>
    </div>
    <hr style="margin-top:0">
    <div class="row">
        <div class="col-sm-4">
            <?= $form->field($model, 'phone')->input('tel', ['placeholder' => 'Enter a valid phone...'])->hint('Phone validation input.') ?>
        </div>
        <div class="col-sm-4">
            <?= $form->field($model, 'email_1')->input('email', ['placeholder' => 'Enter a valid email...'])->hint('Email validation input.') ?>
        </div>
        <div class="col-sm-4">
            <?= $form->field($model, 'website')->input('url', ['placeholder' => 'Enter a valid url...'])->hint('URL validation input.') ?>
        </div>
    </div>
    <hr style="margin-top:0">
    <div class="row">
        <div class="col-sm-6">
            <div class="mb-2" style="float:right">
                <?= Html::submitButton('Submit', ['class' => 'btn btn-primary']) ?>
                <?= Html::resetButton('Reset', ['class' => 'btn btn-secondary btn-default']) ?>
            </div>
        </div>
    </div>
    <?php ActiveForm::end(); ?>
</div>