README

A Symfony form theme that renders forms with the markup of KERN UX, the open design system for German public administration — analogous to Symfony's built-in bootstrap_5_layout.html.twig.

The theme covers the KERN form components: text inputs, textareas, selects, radio/checkbox groups (as kern-fieldset), single checkboxes, buttons, hints, and error messages (inline kern-error per field, kern-alert on the root form). Following the KERN guidelines it marks optional fields instead of required ones and uses aria-required rather than the native required attribute.

Note: This package ships markup only. Your application must include the KERN UX styles itself, e.g. via @kern-ux/native.

Requirements

• PHP 8.1+ (PHP 8.4+ for Symfony 8)
• Symfony 6.4, 7.x or 8.x (symfony/form + symfony/twig-bridge)

Installation

composer require inixmedia/kern-ux-form-theme

If you don't use Symfony Flex, register the bundle manually:

// config/bundles.php
return [
    // ...
    Inixmedia\KernUxFormTheme\KernUxFormThemeBundle::class => ['all' => true],
];

Usage

Enable the theme globally:

# config/packages/twig.yaml
twig:
    form_themes:
        - '@KernUxFormTheme/kern_layout.html.twig'

Or per template:

{% form_theme form '@KernUxFormTheme/kern_layout.html.twig' %}

{{ form(form) }}

Rendered markup

A simple text field row renders as:

<div class="kern-form-input">
    <label class="kern-label" for="form_name">Vorname</label>
    <div class="kern-hint" id="form_name_help">Wie im Ausweis angegeben</div>
    <input class="kern-form-input__input" id="form_name" name="form[name]"
           aria-required="true" aria-describedby="form_name_help" type="text">
</div>

Expanded choices become a KERN fieldset:

<fieldset class="kern-fieldset">
    <legend class="kern-label kern-label--large">Anrede</legend>
    <div class="kern-fieldset__body" id="form_salutation">
        <div class="kern-form-check">
            <input class="kern-form-check__radio" type="radio" ...>
            <label class="kern-label" for="...">Frau</label>
        </div>
        ...
    </div>
</fieldset>

Development

composer install

# Run the test suite (renders real forms through the theme)
composer test

# Lint the Twig templates
composer lint

License

Released under the MIT License.

KERN UX itself is developed by the German federal and state governments; see kern-ux.de for the design system's own licensing.