jostkleigrewe/symfony-tabler-bundle

Tabler Design System FormTypes and Components for Symfony

v0.1.0 2026-02-20 20:28 UTC

Requires

• php: >=8.4
• symfony/form: ^7.0 || ^8.0
• symfony/twig-bundle: ^7.0 || ^8.0

Requires (Dev)

• phpstan/phpstan: ^2.0
• symplify/easy-coding-standard: ^12.0 || ^13.0

Suggests

• doctrine/orm: Required for EntityCardType
• symfony/ux-twig-component: Required for standalone Twig components (FloatingInput etc.)

MIT

• symfony
• ui
• form
• components
• design-system
• tabler

README

Symfony Bundle providing FormTypes and TwigComponents for the Tabler Design System.

Features

FormTypes

• FloatingUnderlineType - Elegant input with floating label and animated underline
• SwitchType - Checkbox rendered as Tabler switch
• ChoiceCardType - Card-based choice selection with icons and badges
• EntityCardType - Like ChoiceCardType, but for Doctrine entities
• CardSelectType - Generic card-based multiple selection

TwigComponents

• PageHeader - Page header with icon, title, subtitle and action buttons
• StatCard - Statistics card for dashboards with trend indicators
• Panel - Generic card/panel with title and content slot
• Alert - Notification alerts (success, info, warning, danger)
• EmptyState - Empty state for lists without entries
• HelpTooltip - Contextual help tooltip with info icon

Requirements

This bundle requires Tabler to be installed in your application:

• Tabler CSS Framework
• Tabler Icons (for icon support)
• Symfony UX TwigComponent (for TwigComponents)

The bundle does NOT ship Tabler assets - you need to install them yourself.

Installation

Step 1: Install via Composer

composer require jostkleigrewe/symfony-tabler-bundle

Step 2: Register Bundle

If not using Symfony Flex, add to config/bundles.php:

return [
    // ...
    Jostkleigrewe\TablerBundle\TablerBundle::class => ['all' => true],
];

Step 3: Register Form Themes

Add to config/packages/twig.yaml:

twig:
    form_themes:
        - 'bootstrap_5_layout.html.twig'
        - '@Tabler/form/floating_underline.html.twig'
        - '@Tabler/form/switch.html.twig'
        - '@Tabler/form/choice_card.html.twig'
        - '@Tabler/form/card_select.html.twig'

Step 4: Include CSS

Copy assets/styles/tabler-forms.css from this bundle to your project's public directory, or include it via Asset Mapper:

{# templates/base.html.twig #}
<link rel="stylesheet" href="{{ asset('path/to/tabler-forms.css') }}">

Step 5 (Optional): Enable Showcase Routes

To see the bundle showcase at /tabler/showcase, add to config/routes/tabler.yaml:

tabler_bundle:
    resource: '@TablerBundle/config/routes.yaml'

TwigComponents Usage

PageHeader

<twig:Tabler:PageHeader
    title="Dashboard"
    pretitle="Overview"
    subtitle="Welcome back!"
    icon="dashboard"
    iconColor="azure"
>
    <twig:block name="actions">
        <a href="#" class="btn btn-primary">Add New</a>
    </twig:block>
</twig:Tabler:PageHeader>

StatCard

<twig:Tabler:StatCard
    label="Total Users"
    value="1,234"
    icon="users"
    iconColor="blue"
    trend="up"
    hint="+12% this month"
/>

Panel

<twig:Tabler:Panel title="Login" subtitle="Enter your credentials" icon="login">
    <form>...</form>
</twig:Tabler:Panel>

Alert

<twig:Tabler:Alert type="success" title="Saved!" text="Your changes have been saved." />
<twig:Tabler:Alert type="warning" :dismissible="true" title="Warning" />
<twig:Tabler:Alert type="danger" :important="true" title="Error" />

EmptyState

<twig:Tabler:EmptyState
    title="No users yet"
    text="Add your first user to get started"
    icon="users"
    actionUrl="/users/new"
    actionLabel="Add User"
/>

HelpTooltip

<twig:Tabler:HelpTooltip text="Explanation here" />
<twig:Tabler:HelpTooltip text="With title" title="Redirect URI" />

FormTypes Usage

FloatingUnderlineType

Material Design inspired input with floating label and animated underline.

use Jostkleigrewe\TablerBundle\Form\Type\FloatingUnderlineType;

$builder->add('email', FloatingUnderlineType::class, [
    'label' => 'Email Address',
    'icon' => 'mail',              // Tabler Icon name (without ti- prefix)
    'input_type' => 'email',       // text, email, password, tel, url, search
    'help' => 'Your business email',
]);

Options:

Option	Type	Default	Description
icon	string|null	null	Tabler Icon name
input_type	string	'text'	HTML input type

SwitchType

Renders a checkbox as a Tabler switch toggle.

use Jostkleigrewe\TablerBundle\Form\Type\SwitchType;

$builder->add('isActive', SwitchType::class, [
    'label' => 'Active',
    'help' => 'User can log in',
]);

ChoiceCardType

Card-based choice selection with icons, badges, and descriptions.

use Jostkleigrewe\TablerBundle\Form\Type\ChoiceCardType;

$builder->add('grantTypes', ChoiceCardType::class, [
    'choices' => [
        'Authorization Code' => 'authorization_code',
        'Client Credentials' => 'client_credentials',
    ],
    'icon' => 'key',           // Global icon for all choices
    'icon_color' => 'azure',   // Global icon color
    'columns' => 2,            // Grid columns: 1, 2, 3, or 4
    'choice_attr' => fn($value) => match($value) {
        'client_credentials' => [
            'data-badge' => 'M2M',
            'data-badge-class' => 'bg-purple-lt',
            'data-description' => 'For server-to-server communication',
        ],
        default => [],
    },
]);

Options:

Option	Type	Default	Description
icon	string|null	null	Global icon for all choices
icon_color	string	'secondary'	Global icon color
columns	int	2	Grid columns (1-4)

EntityCardType

Like ChoiceCardType, but for Doctrine entities.

use Jostkleigrewe\TablerBundle\Form\Type\EntityCardType;

$builder->add('scopes', EntityCardType::class, [
    'class' => Scope::class,
    'query_builder' => fn($repo) => $repo->createQueryBuilder('s')
        ->where('s.active = true'),
    'choice_label' => fn(Scope $s) => $s->getDisplayName(),
    'choice_attr' => fn(Scope $s) => [
        'data-icon' => $s->getIcon() ?? 'lock',
        'data-icon-color' => $s->getIconColor() ?? 'azure',
        'data-description' => $s->getDescription(),
        'data-badge' => $s->isStandard() ? 'OIDC' : null,
    ],
    'columns' => 2,
]);

CardSelectType

Generic card-based multiple selection (extends EntityType).

use Jostkleigrewe\TablerBundle\Form\Type\CardSelectType;

$builder->add('roles', CardSelectType::class, [
    'class' => Role::class,
    'choice_label' => 'name',
    'choice_attr' => fn(Role $r) => [
        'data-icon' => 'shield',
        'data-description' => $r->getDescription(),
    ],
]);

Data Attributes for Cards

Use these in choice_attr to customize card appearance:

Attribute	Description
data-icon	Tabler Icon name (without ti- prefix)
data-icon-color	Color: azure, green, purple, orange, red, etc.
data-description	Description text below the label
data-badge	Badge text (e.g., "M2M", "OIDC")
data-badge-class	Badge CSS class (e.g., bg-azure-lt, bg-purple-lt)
data-code	Technical code displayed in monospace
data-required	Set to "1" for required entries (not deselectable)
data-indicator-icon	Additional indicator icon
data-indicator-class	Indicator CSS class
data-indicator-title	Tooltip for indicator

Example: Login Form

// src/Form/LoginFormType.php
use Jostkleigrewe\TablerBundle\Form\Type\FloatingUnderlineType;

class LoginFormType extends AbstractType
{
    public function buildForm(FormBuilderInterface $builder, array $options): void
    {
        $builder
            ->add('_username', FloatingUnderlineType::class, [
                'label' => 'Email',
                'icon' => 'mail',
                'input_type' => 'email',
            ])
            ->add('_password', FloatingUnderlineType::class, [
                'label' => 'Password',
                'icon' => 'lock',
                'input_type' => 'password',
            ]);
    }

    public function getBlockPrefix(): string
    {
        return ''; // No prefix for Security form fields
    }
}

Requirements

• PHP 8.4+
• Symfony 7.0+ or 8.0+
• Symfony UX TwigComponent (for TwigComponents)
• Tabler CSS Framework (not included)
• Tabler Icons CSS (not included)
• Optional: doctrine/orm (for EntityCardType)

License

MIT License - see LICENSE file.