![\"\"](\"https:\/\/notmart.org\/blog\/wp-content\/uploads\/2026\/04\/image-1.png\")
<\/a><\/figure>\n\n\n\nThis is a fairly clean layout which however is starting to slowly become outdated, as modern toolkits are starting to use a different layout nowdays, based on “cards”<\/p>\n\n\n\n Unfortunately FormLayout very bound to the classic layout, and it wasn\u2019t really possible to adapt it to the new look in a compatible way which didn\u2019t break existing applications in unexpected ways.<\/p>\n\n\n\n This is also the reason a new approach was done provided by kirigami addons: \u201cFormCard\u201d, which is used by a lot of applications; for instance here in NeoChat:<\/p>\n\n\n\n We wanted to have this new style of forms in the base Kirigami API, so after a review of the existing FormCard, we decided to make several changes, for two main reasons: First, FormCard is bound to the card style of form as much as FormLayout was bound to the classic flat style. Also, it tried to provide ready-made components for every kind of control; so it had its own TextField, its own RadioButton and so on \u2014 effectively becoming its own separate toolkit.<\/p>\n\n\n\n So we opted instead to go down the route of having a more generic API, so the Forms module includes containers that define a semantic structure of a form, which contains all the normal controls \u2014 such as textfields, checkboxes and radiobuttons.<\/p>\n\n\n\n This is a code example of the new API:<\/p>\n\n\n\n which will look like this:<\/p>\n\n\n\n Or, in mobile mode:<\/p>\n\n\n\n Semantically, a Form will contain one or more FormGroup objects, each of which will contain one or more FormEntry objects. Then a FormEntry will contain the control which represents the configuration of the particular thing. It can be a single control (like a button or a checkbox) or it can be any layout with completely custom contents.<\/p>\n\n\n\n I already ported 4 modules of systemsettings to the new system: the landing page, the “workspace options” kcm, the mouse settings and the touchpad settings.<\/p>\n\n\n\n But wait\u2026 this page looks exactly<\/strong> the same as before; why?<\/p>\n\n\n\n A key was to do an API that was as much as separated from any appearance as possible, as we don’t know how UI design trends will evolve in the future. But this also allows us another thing: to have two separate implementations: the new one “card based” and a legacy one which looks exactly like the current FormLayout components. This is used only <\/em>in systemsettings, so we can port all the kcms without introducing glaring visual inconsistencies, and when we are done, flick the switch and convert the look of everything all in one go.<\/p>\n\n\n\n Since most of KDE\u2019s QML applications already use the existing card-style kirigamiaddons FormCard components, the new look will be used there.<\/p>\n\n\n\n And then in the future, when trends change again, we can re-style all the settings pages in one go.<\/p>\n\n\n\n We ideally want the whole set of systemsettings kcms to be ported as soon as possible to the new system, so we can have soon a nice visual overhaul in the whole systemsettings.<\/p>\n\n\n\n In order for this to happen, we need the help of everyone, so\u2026 patches welcome \ud83d\ude42<\/p>\n\n\n\n As an example, this<\/a> is the merge request that ported the first four kcms.<\/p>\n\n\n\n When porting, it\u2019s also possible to see how the kcm will look with the new system as well, to make sure it works well for when we flick the switch. If we run in a terminal:<\/p>\n\n\n\n We get systemsettings using the new style for pages already ported:<\/p>\n\n\n\n Porting from FormLayout to the new Form\/FormGroup\/FormEntry system should be really straightforward; it should be possible to make good progress in little time.<\/p>\n\n\n\n With your help, soon KDE\u2019s settings will benefit from greater consistency, a more modern style, and easier adaptation to future designs.<\/p>\n","protected":false},"excerpt":{"rendered":" Recently a new submodule has landed in Kirigami: \u201cForms\u201d. Until this point, Kirigami had only offered the classic \u201cFormLayout\u201d component. which is used for configuration pages throughoug systemsettings, Plasma, and some apps. It\u2019s the classical form used in desktop toolkits for decades: This is a fairly clean layout which however is starting to slowly become […]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[12,16],"tags":[197,2,159,198,27],"class_list":["post-6862","post","type-post","status-publish","format-standard","hentry","category-graphics","category-software","tag-design","tag-kde","tag-kirigami","tag-ui","tag-ux"],"_links":{"self":[{"href":"https:\/\/notmart.org\/blog\/wp-json\/wp\/v2\/posts\/6862","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/notmart.org\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/notmart.org\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/notmart.org\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/notmart.org\/blog\/wp-json\/wp\/v2\/comments?post=6862"}],"version-history":[{"count":3,"href":"https:\/\/notmart.org\/blog\/wp-json\/wp\/v2\/posts\/6862\/revisions"}],"predecessor-version":[{"id":6875,"href":"https:\/\/notmart.org\/blog\/wp-json\/wp\/v2\/posts\/6862\/revisions\/6875"}],"wp:attachment":[{"href":"https:\/\/notmart.org\/blog\/wp-json\/wp\/v2\/media?parent=6862"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/notmart.org\/blog\/wp-json\/wp\/v2\/categories?post=6862"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/notmart.org\/blog\/wp-json\/wp\/v2\/tags?post=6862"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n import QtQuick.Controls as QQC\n import org.kde.kirigami as Kirigami\n\n Kirigami.Form {\n Kirigami.FormGroup {\n title: \"Global Settings\"\n Kirigami.FormEntry {\n contentItem: QQC.CheckBox {\n text: \"Show Sidebar\"\n }\n }\n Kirigami.FormEntry {\n contentItem: QQC.CheckBox {\n text: \"Auto Save\"\n }\n }\n }\n Kirigami.FormGroup {\n title: \"Theme Options\"\n Kirigami.FormEntry {\n title: \"Colors:\"\n contentItem: QQC.CheckBox {\n text: \"Dark Theme\"\n }\n }\n Kirigami.FormSeparator {}\n Kirigami.FormEntry {\n contentItem: QQC.CheckBox {\n text: \"High Contrast\"\n }\n }\n ...\n }\n }\n<\/code><\/pre>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\nA call to action<\/h2>\n\n\n\n
KDE_KIRIGAMI_FORMS_STYLE=cards systemsettings<\/code><\/pre>\n\n\n\n<\/a><\/figure>\n\n\n\n<\/a><\/figure>\n\n\n\n