form/bs5_components

source < >

return function () {
    $intro = '<p class="docs-demo-intro">The Bootstrap 5 form components of <code>form()</code>: switches (<code>switch</code> /
        <code>switch_box()</code>), <code>btn_group</code> radios and checkboxes as <code>btn-check</code> buttons, native
        <code>form-range</code> with <code>show_value</code> and <code>form-control-color</code>, control <code>sizing</code>, floating labels
        (<code>floating</code> per field or per form) and input groups with several addons, buttons (<code>prepend_html</code> /
        <code>append_html</code>) and <code>input_group_size</code>. Switch between <code>?bs=5</code> and <code>?bs=3</code>: under Bootstrap 3
        the same calls render the fallbacks (a plain checkbox, a <code>data-toggle="buttons"</code> group, a normal label, <code>input-sm</code>,
        <code>input-group-btn</code>); a <code>sizing</code> on selects and textareas applies there only with
        <code>$PROJECT_CONF[\'form2\'][\'CONF_SIZING_ON_SELECTS_ALL_FW\'] = true</code>. Classes: <code>yf_form2</code>, <code>yf_html5fw_bs5</code>, <code>yf_html_bs5</code>.</p>';

    $r = [
        'notify' => 1,
        'dark_mode' => 0,
        'size' => 'm',
        'agree' => 1,
        'active' => 1,
        'volume' => 30,
        'colour' => '#0d6efd',
        'email' => '[email protected]',
        'city' => 'kyiv',
    ];
    $sizes = ['s' => 'Small', 'm' => 'Medium', 'l' => 'Large'];
    $cities = ['kyiv' => 'Kyiv', 'lviv' => 'Lviv', 'odesa' => 'Odesa'];
    $btn = function ($text, $class = 'btn btn-outline-secondary') {
        return '<button class="' . (conf('css_framework') === 'bs5' ? $class : 'btn btn-default') . '" type="button">' . $text . '</button>';
    };

    $fields = form($r, ['no_form' => 1])
        ->fieldset_start(['legend' => 'Switches'])
            ->check_box('notify', ['switch' => 1, 'desc' => 'Email notifications'])
            ->switch_box('dark_mode', ['desc' => 'Dark mode', 'no_label' => 1])
        ->fieldset_end()
        ->fieldset_start(['legend' => 'Button groups (btn_group)'])
            ->radio_box('size', $sizes, ['btn_group' => 1, 'desc' => 'Size'])
            ->check_box('agree', ['btn_group' => 1, 'desc' => 'Agree'])
            ->active_box('active', ['btn_group' => 1])
        ->fieldset_end()
        ->fieldset_start(['legend' => 'Range and colour'])
            ->range('volume', ['min' => 0, 'max' => 100, 'step' => 5, 'show_value' => 1, 'desc' => 'Volume'])
            ->color('colour', ['desc' => 'Colour'])
        ->fieldset_end()
        ->fieldset_start(['legend' => 'Sizing'])
            ->text('small_text', ['sizing' => 'sm', 'desc' => 'Small input'])
            ->text('large_text', ['sizing' => 'lg', 'desc' => 'Large input'])
            ->select_box('small_city', $cities, ['sizing' => 'sm', 'desc' => 'Small select'])
            ->select_box('large_city', $cities, ['sizing' => 'lg', 'desc' => 'Large select'])
        ->fieldset_end()
        ->fieldset_start(['legend' => 'Floating labels (per field)'])
            ->text('full_name', ['floating' => 1, 'desc' => 'Full name'])
            ->email('email', ['floating' => 1, 'desc' => 'Email'])
            ->select_box('city', $cities, ['floating' => 1, 'desc' => 'City'])
            ->textarea('note', ['floating' => 1, 'desc' => 'Note'])
        ->fieldset_end()
        ->fieldset_start(['legend' => 'Input groups'])
            ->text('price', ['prepend' => ['$', '0.'], 'append' => ['.00', 'USD'], 'desc' => 'Several addons'])
            ->text('search_q', ['append_html' => $btn('Search', 'btn btn-primary'), 'desc' => 'Button after'])
            ->text('amount', ['prepend_html' => [$btn('-'), $btn('+')], 'append' => 'kg', 'desc' => 'Buttons before'])
            ->text('handle_sm', ['prepend' => '@', 'input_group_size' => 'sm', 'desc' => 'input_group_size sm'])
            ->text('handle_lg', ['prepend' => '@', 'input_group_size' => 'lg', 'desc' => 'input_group_size lg'])
        ->fieldset_end();

    // the form-level option floats every text-like field; the checkbox keeps its normal label
    $login = form([], ['no_form' => 1, 'floating' => 1])
        ->fieldset_start(['legend' => 'Floating labels (form option)'])
            ->login('login', ['desc' => 'Login'])
            ->password('pswd', ['desc' => 'Password'])
            ->check_box('remember', ['switch' => 1, 'desc' => 'Remember me', 'no_label' => 1])
        ->fieldset_end();

    return $intro . '<div class="docs-demo-bs5-components">' . $fields . $login . '</div>';
};