Bootstrap 5 Component Examples

Form Input-group Component Documentation

 Input Group Component
   - name: string - Input field name attribute (required)
   - type: string - Input type (text, email, password, etc.) (default: text)
   - value: string - Input value (optional)
   - placeholder: string - Placeholder text (optional)
   - prepend: string|array - Content to prepend (text or array of items) (optional)
   - append: string|array - Content to append (text or array of items) (optional)
   - required: boolean - Whether the field is required (default: false)
   - disabled: boolean - Whether the field is disabled (default: false)
   - readonly: boolean - Whether the field is readonly (default: false)
   - class: string - Additional CSS classes for the input group (optional)
   - inputClass: string - Additional CSS classes for the input element (optional)
   - id: string - Input ID attribute (optional, defaults to name)
   - size: string - Size of the input group (sm, lg) (optional)
   - control: string - Form control HTML (optional, defaults to input)
   - middle: string|array - Content to place between inputs (optional)
   - secondControl: string - Second form control HTML (optional)

All available options for the Input-group component


    ThemedComponent::make("form/input-group")
	->addAttribute('value') //Add an attribute to the element. This is a string like 'data-foo="bar"' or multiple attributes in a single string like 'data-foo="bar" data-bar="baz"' (optional)
	->addCss('value') //string - Add css styles to the element. This should be '<style> custom-class {...} </style>' (optional)
	->addJavaScript('value') //string - Add a script to the element. This is a string like '<script>console.log('Hello World!')</script>' (optional)
	->append('value') //string|array - Content to append (text or array of items) (optional)
	->canSee('value') //bool - Whether the component should be visible or not (optional)
	->class('value') //string - Additional CSS classes for the input group (optional)
	->control('value') //string - Form control HTML (optional, defaults to input)
	->disabled('value') //boolean - Whether the field is disabled (default: false)
	->id('value') //string - The id of the element. If no id is supplied, a random one will be generated (optional)
	->inputClass('value') //string - Additional CSS classes for the input element (optional)
	->middle('value') //string|array - Content to place between inputs (optional)
	->name('value') //string - Input field name attribute (required)
	->placeholder('value') //string - Placeholder text (optional)
	->prepend('value') //string|array - Content to prepend (text or array of items) (optional)
	->readonly('value') //boolean - Whether the field is readonly (default: false)
	->required('value') //boolean - Whether the field is required (default: false)
	->secondControl('value') //string - Second form control HTML (optional)
	->size('value') //string - Size of the input group (sm, lg) (optional)
	->type('value') //string - Input type (text, email, password, etc.) (default: text)
	->value('value') //string - Input value (optional)
	->render();

Basic Input Groups

Input groups with text addons and help text

// Username with @ prepend
echo ThemedComponent::make('form/input-group')
    ->name('username1')
    ->prepend('@')
    ->placeholder('Username')
    ->class('mb-3')
    ->render();

// Email with domain append
echo ThemedComponent::make('form/input-group')
    ->name('username2')
    ->append('@example.com')
    ->placeholder("Recipient's username")
    ->class('mb-3')
    ->render();

// URL input with form group
echo ThemedComponent::make('form/form-group')
    ->label('Your vanity URL')
    ->for('basic-url')
    ->control(
        ThemedComponent::make('form/input-group')
            ->name('basic-url')
            ->id('basic-url')
            ->prepend('https://example.com/users/')
            ->render()
    )
    ->help('Example help text goes outside the input group.')
    ->render();

@

@example.com

Your vanity URL

https://example.com/users/

Example help text goes outside the input group.

Multiple Addons

Input groups with multiple addons and inputs

// Currency input with $ and .00
echo ThemedComponent::make('form/input-group')
    ->name('amount')
    ->prepend('$')
    ->append('.00')
    ->placeholder('Amount')
    ->class('mb-3')
    ->render();

// Multiple inputs with @ separator
echo ThemedComponent::make('form/input-group')
    ->name('username3')
    ->control(
        ThemedComponent::make('form/input')
            ->name('username3')
            ->placeholder('Username')
            ->render()
    )
    ->middle('@')
    ->secondControl(
        ThemedComponent::make('form/input')
            ->name('server')
            ->placeholder('Server')
            ->render()
    )
    ->class('mb-3')
    ->render();

$ .00

@

Different Controls

Input groups with different form controls

// Input group with textarea
echo ThemedComponent::make('form/input-group')
    ->name('textarea')
    ->prepend('With textarea')
    ->control(
        ThemedComponent::make('form/textarea')
            ->name('textarea')
            ->rows(3)
            ->render()
    )
    ->render();

With textarea

Multiple Inputs with Shared Label

Input group with two inputs sharing a single label

// Two inputs with shared label
echo ThemedComponent::make('form/input-group')
    ->name('name')
    ->prepend('First and last name')
    ->control(
        ThemedComponent::make('form/input')
            ->name('first_name')
            ->placeholder('First name')
            ->render()
    )
    ->secondControl(
        ThemedComponent::make('form/input')
            ->name('last_name')
            ->placeholder('Last name')
            ->render()
    )
    ->render();

First and last name

Dropdown Buttons

Input groups with dropdown buttons

// Prepend dropdown
echo ThemedComponent::make('form/input-group')
    ->name('dropdown1')
    ->prepend(
        ThemedComponent::make('buttons/dropdown')
            ->text('Dropdown')
            ->type('outline-secondary')
            ->items([
                ['text' => 'Action', 'href' => '#'],
                ['text' => 'Another action', 'href' => '#'],
                ['text' => 'Something else here', 'href' => '#'],
                ['divider' => true],
                ['text' => 'Separated link', 'href' => '#']
            ])
            ->render()
    )
    ->placeholder('Text input with dropdown button')
    ->class('mb-3')
    ->render();

// Append dropdown
echo ThemedComponent::make('form/input-group')
    ->name('dropdown2')
    ->append(
        ThemedComponent::make('buttons/dropdown')
            ->text('Dropdown')
            ->type('outline-secondary')
            ->menuEnd(true)
            ->items([
                ['text' => 'Action', 'href' => '#'],
                ['text' => 'Another action', 'href' => '#'],
                ['text' => 'Something else here', 'href' => '#'],
                ['divider' => true],
                ['text' => 'Separated link', 'href' => '#']
            ])
            ->render()
    )
    ->placeholder('Text input with dropdown button')
    ->class('mb-3')
    ->render();

// Multiple dropdowns
echo ThemedComponent::make('form/input-group')
    ->name('dropdown3')
    ->prepend(
        ThemedComponent::make('buttons/dropdown')
            ->text('Dropdown')
            ->type('outline-secondary')
            ->items([
                ['text' => 'Action before', 'href' => '#'],
                ['text' => 'Another action before', 'href' => '#'],
                ['text' => 'Something else here', 'href' => '#'],
                ['divider' => true],
                ['text' => 'Separated link', 'href' => '#']
            ])
            ->render()
    )
    ->append(
        ThemedComponent::make('buttons/dropdown')
            ->text('Dropdown')
            ->type('outline-secondary')
            ->menuEnd(true)
            ->items([
                ['text' => 'Action', 'href' => '#'],
                ['text' => 'Another action', 'href' => '#'],
                ['text' => 'Something else here', 'href' => '#'],
                ['divider' => true],
                ['text' => 'Separated link', 'href' => '#']
            ])
            ->render()
    )
    ->placeholder('Text input with 2 dropdown buttons')
    ->class('mb-3')
    ->render();

// Segmented dropdown buttons
echo ThemedComponent::make('form/input-group')
    ->name('dropdown4')
    ->prepend(
        ThemedComponent::make('buttons/dropdown')
            ->text('Action')
            ->type('outline-secondary')
            ->segmented(true)
            ->items([
                ['text' => 'Action', 'href' => '#'],
                ['text' => 'Another action', 'href' => '#'],
                ['text' => 'Something else here', 'href' => '#'],
                ['divider' => true],
                ['text' => 'Separated link', 'href' => '#']
            ])
            ->render()
    )
    ->placeholder('Text input with segmented dropdown button')
    ->class('mb-3')
    ->render();

// Segmented dropdown buttons at both ends
echo ThemedComponent::make('form/input-group')
    ->name('dropdown5')
    ->control(
        ThemedComponent::make('form/input')
            ->name('dropdown5')
            ->placeholder('Text input with segmented dropdown buttons')
            ->render()
    )
    ->prepend(
        ThemedComponent::make('buttons/dropdown')
            ->text('Action')
            ->type('outline-secondary')
            ->segmented(true)
            ->items([
                ['text' => 'Action', 'href' => '#'],
                ['text' => 'Another action', 'href' => '#'],
                ['text' => 'Something else here', 'href' => '#'],
                ['divider' => true],
                ['text' => 'Separated link', 'href' => '#']
            ])
            ->render()
    )
    ->append(
        ThemedComponent::make('buttons/dropdown')
            ->text('Action')
            ->type('outline-secondary')
            ->segmented(true)
            ->menuEnd(true)
            ->items([
                ['text' => 'Action', 'href' => '#'],
                ['text' => 'Another action', 'href' => '#'],
                ['text' => 'Something else here', 'href' => '#'],
                ['divider' => true],
                ['text' => 'Separated link', 'href' => '#']
            ])
            ->render()
    )
    ->render();

File Input Groups

Input groups with file inputs and various addons

// File input with label prepend
echo ThemedComponent::make('form/input-group')
    ->name('inputGroupFile01')
    ->prepend('Upload')
    ->control(
        ThemedComponent::make('form/input')
            ->type('file')
            ->name('inputGroupFile01')
            ->id('inputGroupFile01')
            ->render()
    )
    ->class('mb-3')
    ->render();

// File input with label append
echo ThemedComponent::make('form/input-group')
    ->name('inputGroupFile02')
    ->control(
        ThemedComponent::make('form/input')
            ->type('file')
            ->name('inputGroupFile02')
            ->id('inputGroupFile02')
            ->render()
    )
    ->append('Upload')
    ->class('mb-3')
    ->render();

// File input with button prepend
echo ThemedComponent::make('form/input-group')
    ->name('inputGroupFile03')
    ->prepend(
        ThemedComponent::make('buttons/button')
            ->text('Button')
            ->type('outline-secondary')
            ->id('inputGroupFileAddon03')
            ->render()
    )
    ->control(
        ThemedComponent::make('form/input')
            ->type('file')
            ->name('inputGroupFile03')
            ->id('inputGroupFile03')
            ->ariaDescribedby('inputGroupFileAddon03')
            ->ariaLabel('Upload')
            ->render()
    )
    ->class('mb-3')
    ->render();

// File input with button append
echo ThemedComponent::make('form/input-group')
    ->name('inputGroupFile04')
    ->control(
        ThemedComponent::make('form/input')
            ->type('file')
            ->name('inputGroupFile04')
            ->id('inputGroupFile04')
            ->ariaDescribedby('inputGroupFileAddon04')
            ->ariaLabel('Upload')
            ->render()
    )
    ->append(
        ThemedComponent::make('buttons/button')
            ->text('Button')
            ->type('outline-secondary')
            ->id('inputGroupFileAddon04')
            ->render()
    )
    ->render();

Upload

Input-group component template

The Twig template file for the Input-group component

Content of the input-group.twig file

{# Input Group Component
   - name: string - Input field name attribute (required)
   - type: string - Input type (text, email, password, etc.) (default: text)
   - value: string - Input value (optional)
   - placeholder: string - Placeholder text (optional)
   - prepend: string|array - Content to prepend (text or array of items) (optional)
   - append: string|array - Content to append (text or array of items) (optional)
   - required: boolean - Whether the field is required (default: false)
   - disabled: boolean - Whether the field is disabled (default: false)
   - readonly: boolean - Whether the field is readonly (default: false)
   - class: string - Additional CSS classes for the input group (optional)
   - inputClass: string - Additional CSS classes for the input element (optional)
   - id: string - Input ID attribute (optional, defaults to name)
   - size: string - Size of the input group (sm, lg) (optional)
   - control: string - Form control HTML (optional, defaults to input)
   - middle: string|array - Content to place between inputs (optional)
   - secondControl: string - Second form control HTML (optional)
#}

<div class="input-group {% if content.size %}input-group-{{ content.size }}{% endif %} {{ content.class|default('') }}">
    {% if content.prepend is defined %}
        {% if content.prepend is iterable %}
            {% for item in content.prepend %}
                {% if item matches '/<(button|div|input|textarea|select)/' %}
                    {{ item|raw }}
                {% else %}
                    <span class="input-group-text">{{ item }}</span>
                {% endif %}
            {% endfor %}
        {% else %}
            {% if content.prepend matches '/<(button|div|input|textarea|select)/' %}
                {{ content.prepend|raw }}
            {% else %}
                <span class="input-group-text">{{ content.prepend }}</span>
            {% endif %}
        {% endif %}
    {% endif %}

    {% if content.control is defined %}
        {{ content.control|raw }}
    {% else %}
        <input 
            type="{{ content.type|default('text') }}"
            name="{{ content.name }}"
            id="{{ content.id|default(content.name) }}"
            value="{{ content.value|default('') }}"
            {% if content.placeholder %}placeholder="{{ content.placeholder }}"{% endif %}
            {% if content.required %}required{% endif %}
            {% if content.disabled %}disabled{% endif %}
            {% if content.readonly %}readonly{% endif %}
            class="form-control {{ content.inputClass|default('') }}"
        >
    {% endif %}

    {% if content.middle is defined %}
        {% if content.middle is iterable %}
            {% for item in content.middle %}
                {% if item matches '/<(button|div|input|textarea|select)/' %}
                    {{ item|raw }}
                {% else %}
                    <span class="input-group-text">{{ item }}</span>
                {% endif %}
            {% endfor %}
        {% else %}
            {% if content.middle matches '/<(button|div|input|textarea|select)/' %}
                {{ content.middle|raw }}
            {% else %}
                <span class="input-group-text">{{ content.middle }}</span>
            {% endif %}
        {% endif %}
    {% endif %}

    {% if content.secondControl is defined %}
        {{ content.secondControl|raw }}
    {% endif %}

    {% if content.append is defined %}
        {% if content.append is iterable %}
            {% for item in content.append %}
                {% if item matches '/<(button|div|input|textarea|select)/' %}
                    {{ item|raw }}
                {% else %}
                    <span class="input-group-text">{{ item }}</span>
                {% endif %}
            {% endfor %}
        {% else %}
            {% if content.append matches '/<(button|div|input|textarea|select)/' %}
                {{ content.append|raw }}
            {% else %}
                <span class="input-group-text">{{ content.append }}</span>
            {% endif %}
        {% endif %}
    {% endif %}
</div>