PHPackages beromir/neos-toggle-editor - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. beromir/neos-toggle-editor ActiveNeos-plugin[Utility & Helpers](/categories/utility) beromir/neos-toggle-editor ========================== A plugin for Neos CMS which provides a toggle editor. v1.6.1(4mo ago)52.5k↓39.7%2[1 issues](https://github.com/beromir/Beromir.ToggleEditor/issues)1GPL-3.0JavaScript Since Nov 26Pushed 4mo ago1 watchersCompare [ Source](https://github.com/beromir/Beromir.ToggleEditor)[ Packagist](https://packagist.org/packages/beromir/neos-toggle-editor)[ RSS](/packages/beromir-neos-toggle-editor/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (10)Dependencies (1)Versions (23)Used By (1) Toggle Editor for Neos CMS ========================== [](#toggle-editor-for-neos-cms) The toggle editor lets you select one of multiple values. It provides different layout options. Layouts ------- [](#layouts) ### Grid [](#grid) [![Screenshot of grid layouts](https://private-user-images.githubusercontent.com/4510166/374322104-59a680e4-da5e-4f47-a610-3a9a98928427.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ3NTYzMzIsIm5iZiI6MTc3NDc1NjAzMiwicGF0aCI6Ii80NTEwMTY2LzM3NDMyMjEwNC01OWE2ODBlNC1kYTVlLTRmNDctYTYxMC0zYTlhOTg5Mjg0MjcucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDMyOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAzMjlUMDM0NzEyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZmUwNTRlY2U2YmIyMTZjOTkzZWUxNzU2MzE2Nzk1MWE2ODc4MjE3MzM2ODRhMTZmYzFkMmU0N2JmZWI5YzM5ZCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.j0HhOM9-T9h1T_23Q-XvrYQk2bEtYLJaNFLfbVTBJxE)](https://private-user-images.githubusercontent.com/4510166/374322104-59a680e4-da5e-4f47-a610-3a9a98928427.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ3NTYzMzIsIm5iZiI6MTc3NDc1NjAzMiwicGF0aCI6Ii80NTEwMTY2LzM3NDMyMjEwNC01OWE2ODBlNC1kYTVlLTRmNDctYTYxMC0zYTlhOTg5Mjg0MjcucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDMyOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAzMjlUMDM0NzEyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZmUwNTRlY2U2YmIyMTZjOTkzZWUxNzU2MzE2Nzk1MWE2ODc4MjE3MzM2ODRhMTZmYzFkMmU0N2JmZWI5YzM5ZCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.j0HhOM9-T9h1T_23Q-XvrYQk2bEtYLJaNFLfbVTBJxE)Property definitions from the screenshot``` headingLevel: type: string ui: label: Heading level inspector: editor: Beromir.ToggleEditor/Editor editorOptions: values: h1: label: H1 description: Heading level 1 h2: label: H2 description: Heading level 2 h3: label: H3 description: Heading level 3 alignment: type: string ui: label: Alignment inspector: editor: Beromir.ToggleEditor/Editor editorOptions: values: left: icon: align-left description: Align left center: label: Center icon: align-center right: label: Right icon: align-right layout: type: string ui: label: Layout inspector: editor: Beromir.ToggleEditor/Editor editorOptions: allowEmpty: true columns: 2 values: grid: label: Grid flex: label: Flex list: label: Radio color: label: Color ``` ### Flex [](#flex) [![Screenshot of flex](https://private-user-images.githubusercontent.com/4510166/374323282-ab880a7f-7ec7-4b5a-9e72-8d120ce3d859.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ3NTYzMzIsIm5iZiI6MTc3NDc1NjAzMiwicGF0aCI6Ii80NTEwMTY2LzM3NDMyMzI4Mi1hYjg4MGE3Zi03ZWM3LTRiNWEtOWU3Mi04ZDEyMGNlM2Q4NTkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDMyOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAzMjlUMDM0NzEyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Y2NkYzIxZjhiNjUxMjUzYTY4OWVhNWMzMWNjNjk3N2E4ZjA0NTMzODI5NDhlYWFjMThjMzBlMzFmNWU3ZWVlYiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.ZKOQzhf3I1VWg31weIcSENNwtvqQq1TfEbOM_Tw6iu8)](https://private-user-images.githubusercontent.com/4510166/374323282-ab880a7f-7ec7-4b5a-9e72-8d120ce3d859.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ3NTYzMzIsIm5iZiI6MTc3NDc1NjAzMiwicGF0aCI6Ii80NTEwMTY2LzM3NDMyMzI4Mi1hYjg4MGE3Zi03ZWM3LTRiNWEtOWU3Mi04ZDEyMGNlM2Q4NTkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDMyOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAzMjlUMDM0NzEyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9Y2NkYzIxZjhiNjUxMjUzYTY4OWVhNWMzMWNjNjk3N2E4ZjA0NTMzODI5NDhlYWFjMThjMzBlMzFmNWU3ZWVlYiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.ZKOQzhf3I1VWg31weIcSENNwtvqQq1TfEbOM_Tw6iu8)Property definitions from the screenshot``` spacing: type: string ui: label: Spacing inspector: editor: Beromir.ToggleEditor/Editor editorOptions: layout: flex values: none: icon: times description: No spacing small: label: Small medium: label: Medium large: label: Large ``` ### Flex Start [](#flex-start) [![Screenshot of flex-start layout](https://private-user-images.githubusercontent.com/4510166/376667915-f89d32f5-a87c-4191-a5e2-dc56eeed269e.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ3NTYzMzIsIm5iZiI6MTc3NDc1NjAzMiwicGF0aCI6Ii80NTEwMTY2LzM3NjY2NzkxNS1mODlkMzJmNS1hODdjLTQxOTEtYTVlMi1kYzU2ZWVlZDI2OWUucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDMyOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAzMjlUMDM0NzEyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MjE1ODM1NWRhYmYzNTE2ZGU1Y2Q3NzMxNTg1NzI2ODI3ZTNjMDIzNmZlN2VjZjIwZWFmMjBiODE4YmUyZTU1YiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.FdypvjGaFYreVhdZBpl5mheZYhUMZKfvHXGezXNGthM)](https://private-user-images.githubusercontent.com/4510166/376667915-f89d32f5-a87c-4191-a5e2-dc56eeed269e.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ3NTYzMzIsIm5iZiI6MTc3NDc1NjAzMiwicGF0aCI6Ii80NTEwMTY2LzM3NjY2NzkxNS1mODlkMzJmNS1hODdjLTQxOTEtYTVlMi1kYzU2ZWVlZDI2OWUucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDMyOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAzMjlUMDM0NzEyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9MjE1ODM1NWRhYmYzNTE2ZGU1Y2Q3NzMxNTg1NzI2ODI3ZTNjMDIzNmZlN2VjZjIwZWFmMjBiODE4YmUyZTU1YiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.FdypvjGaFYreVhdZBpl5mheZYhUMZKfvHXGezXNGthM)Property definitions from the screenshot``` toggle: type: array ui: label: Toggle Mode inspector: editor: Beromir.ToggleEditor/Editor editorOptions: multiple: true layout: flex-start values: enable: icon: toggle-off iconActive: toggle-on ``` ### List [](#list) [![Screenshot of list layout](https://private-user-images.githubusercontent.com/4510166/374323773-6cf075e1-c34b-4484-9221-130733ac9cf7.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ3NTYzMzIsIm5iZiI6MTc3NDc1NjAzMiwicGF0aCI6Ii80NTEwMTY2LzM3NDMyMzc3My02Y2YwNzVlMS1jMzRiLTQ0ODQtOTIyMS0xMzA3MzNhYzljZjcucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDMyOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAzMjlUMDM0NzEyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OWY5ZjdjY2M5YTkwMWQ0MzljOWEzNDVmOWY2MTk4NTY2N2NmN2Y0Mzc4MDJlZjBmYjlkNzljNzE4ZDUxOWRkNiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.AnvIPb97YAfDGuEwV3ItzvYJ9DlrEFbS7X9JVoa_6cA)](https://private-user-images.githubusercontent.com/4510166/374323773-6cf075e1-c34b-4484-9221-130733ac9cf7.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ3NTYzMzIsIm5iZiI6MTc3NDc1NjAzMiwicGF0aCI6Ii80NTEwMTY2LzM3NDMyMzc3My02Y2YwNzVlMS1jMzRiLTQ0ODQtOTIyMS0xMzA3MzNhYzljZjcucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDMyOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAzMjlUMDM0NzEyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9OWY5ZjdjY2M5YTkwMWQ0MzljOWEzNDVmOWY2MTk4NTY2N2NmN2Y0Mzc4MDJlZjBmYjlkNzljNzE4ZDUxOWRkNiZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.AnvIPb97YAfDGuEwV3ItzvYJ9DlrEFbS7X9JVoa_6cA)Property definitions from the screenshot``` size: type: string ui: label: Size inspector: editor: Beromir.ToggleEditor/Editor editorOptions: allowEmpty: true layout: list values: auto: icon: magic label: Auto small: label: Small medium: label: Medium large: label: Large ``` [![Screenshot of list layout with multiple option](https://private-user-images.githubusercontent.com/4510166/376665757-9239e9c9-ae76-4d0d-9466-b173537cd049.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ3NTYzMzIsIm5iZiI6MTc3NDc1NjAzMiwicGF0aCI6Ii80NTEwMTY2LzM3NjY2NTc1Ny05MjM5ZTljOS1hZTc2LTRkMGQtOTQ2Ni1iMTczNTM3Y2QwNDkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDMyOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAzMjlUMDM0NzEyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZDVjZTNjZmNmY2MwZmE5YmFlYjNmMzYyNTUxYTM1MzAyZDJlMjRlZTg5ZDQ0OWI2Y2MzZjdlY2VjNjY4M2I5ZCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.c_tTN30PtRQHv_M0AaipKsPPf10rzErayYZB20ZPivU)](https://private-user-images.githubusercontent.com/4510166/376665757-9239e9c9-ae76-4d0d-9466-b173537cd049.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ3NTYzMzIsIm5iZiI6MTc3NDc1NjAzMiwicGF0aCI6Ii80NTEwMTY2LzM3NjY2NTc1Ny05MjM5ZTljOS1hZTc2LTRkMGQtOTQ2Ni1iMTczNTM3Y2QwNDkucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDMyOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAzMjlUMDM0NzEyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZDVjZTNjZmNmY2MwZmE5YmFlYjNmMzYyNTUxYTM1MzAyZDJlMjRlZTg5ZDQ0OWI2Y2MzZjdlY2VjNjY4M2I5ZCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.c_tTN30PtRQHv_M0AaipKsPPf10rzErayYZB20ZPivU)Property definitions from the screenshot``` checkboxGroup: type: array ui: label: Checkbox Group inspector: editor: Beromir.ToggleEditor/Editor editorOptions: multiple: true layout: list values: second: iconActive: fire label: Second Checkbox labelActive: Second Checkbox checked position: 20 first: icon: wrench iconActiveRotate: 15 label: First Checkbox position: 10 ``` ### Color [](#color) [![Screenshot of color layout with multiple color values](https://private-user-images.githubusercontent.com/4510166/374317568-1fbaf7c6-48fd-4db5-9777-5ac14d6f09fd.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ3NTYzMzIsIm5iZiI6MTc3NDc1NjAzMiwicGF0aCI6Ii80NTEwMTY2LzM3NDMxNzU2OC0xZmJhZjdjNi00OGZkLTRkYjUtOTc3Ny01YWMxNGQ2ZjA5ZmQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDMyOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAzMjlUMDM0NzEyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZGQ5NTNiZjQ2NDA4ZDYzZTU3MzMwYmI5MzEzYmFkNjQ4M2NlZTZlNTUzMDkzYzQyYTUwODA0NWZmYzgzYmZkMyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.V6sOrV_-KlKP8uudvCWLJQwjWa7c3CcdphW6xYIvjDw)](https://private-user-images.githubusercontent.com/4510166/374317568-1fbaf7c6-48fd-4db5-9777-5ac14d6f09fd.png?jwt=eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3NzQ3NTYzMzIsIm5iZiI6MTc3NDc1NjAzMiwicGF0aCI6Ii80NTEwMTY2LzM3NDMxNzU2OC0xZmJhZjdjNi00OGZkLTRkYjUtOTc3Ny01YWMxNGQ2ZjA5ZmQucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI2MDMyOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNjAzMjlUMDM0NzEyWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9ZGQ5NTNiZjQ2NDA4ZDYzZTU3MzMwYmI5MzEzYmFkNjQ4M2NlZTZlNTUzMDkzYzQyYTUwODA0NWZmYzgzYmZkMyZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QifQ.V6sOrV_-KlKP8uudvCWLJQwjWa7c3CcdphW6xYIvjDw)Property definitions from the screenshot``` color: type: string ui: label: Color layout inspector: editor: Beromir.ToggleEditor/Editor editorOptions: layout: color values: three: color: - "#009246" - white - "#cd2b37" label: "Italy colors" description: "Pizza Margherita" two: color: ["#5d26c3", "#271150"] label: "Two colors" description: "Purple haze" one: color: "#0d0617" label: "Dark color" transparent: color: transparent label: Transparent ``` Installation ------------ [](#installation) Run the following command in your site package: ``` composer require --no-update beromir/neos-toggle-editor ``` Then run `composer update` in your project root. Usage ----- [](#usage) You can select one of the following layout options: - grid - flex - flex-start - list - color If you use the color layout or the grid layout, you can optionally specify the number of columns to render more than one row. The color layout is a special case for selecting a color. It renders the color in the editor. You can use `transparent`as color value to render this value in a visible way for the editors (see screenshot above). Add a property of type string to your NodeType definition and use the following editor configuration: ``` properties: alignment: # If multiple is true, this must be array, otherwise string type: string defaultValue: "left" ui: label: "Alignment" reloadIfChanged: true inspector: editor: "Beromir.ToggleEditor/Editor" editorOptions: # One of 'grid', 'flex', 'flex-start', 'list' or 'color'. Default: 'grid' layout: "flex" # Set number of columns to render multiple rows. Works only with 'grid' and 'color' # This can also be an expression like {items} / 2 # Gets surrounded by Math.floor # Available values {items} = number of values / {maximalRows} = value from maximalRows # The smaller value from columns and maximalColumns will be used columns: 2 # Alternativly you can set the maximal number of columns. Defaults to 4. Works only with 'grid' and 'color' # This can also be an expression like {items} / 2 # Gets surrounded by Math.floor # Available values {items} = number of values maximalColumns: 4 # Allow empty value allowEmpty: true # Value for empty state. Does not work in multiple mode emptyValue: "none" # Enable multiple mode. If this is true, the type must be array # If true, setting allowEmpty to false has no effect. The array can always be empty multiple: false # Define the size of the icons: 'xs', 'sm', 'lg', '2x' or '3x'. Default: null iconSize: "lg" # Disable the whole editor disable: false # This option makes it possible hide the whole editor (incl. label) based on data source hidden: false # Add custom styles to the wrapper wrapperCustomStyle: gap: 2 # Add custom styles to the buttons itself buttonCustomStyle: borderRadius: 2 # Set custom style for the labels (not set on view 'color') # The same is allowed inside a single value labelCustomStyle: fontSize: 25 lineHeight: "39px" # Set the values values: left: # Add custom styles to the button itself buttonCustomStyle: borderRadius: 2 # Set custom style for the label (not set on view 'color') labelCustomStyle: fontSize: 25 lineHeight: "39px" # Show a label label: "Left" # Label on active state labelActive: "Item is left" # Show a description on hover description: "Align left" # Description on active state descriptionActive: "Item is left aligned" # Show an icon. Does not work with the color layout icon: "align-right" # Icon on active state. Does not work with the color layout iconActive: "align-left" # Rotate the icon (in degrees) iconRotate: -45 # Rotate the icon on active state (in degrees) iconActiveRotate: -45 # Specify the color to display in the editor. Does only work with the color layout # If you pass multiple colors as an array (e.g. ['white', 'black]) it will put all defined colors side by # side. (Transparent is also possible) This is useful if you have light and dark mode on your website color: "#ffffff" # Hide the value. Great if you work with ClientEval hidden: "ClientEval: !!node.property.anotherProperty" # Add a preview image. Does not work with the color layout. Can be also a string with svg markup preview: "resource://Vendor.Package/filenameInPublicFolder.png" # Add a preview on active state image. Does not work with the color layout. Can be also a string with svg markup previewActive: "resource://Vendor.Package/filenameInPublicFolder.png" # Rotate the preview (in degrees) previewRotate: -45 # Rotate the preview on active state (in degrees) previewActiveRotate: -45 # If true and no label is defined, the margin from the button get's removed. Defaults to false previewFull: true # Disable an item option disabled: false center: label: "Center" icon: "align-center" # The order of the values can be altered by setting position. It is the same logic as @position in Fusion # https://neos.readthedocs.io/en/stable/References/NeosFusionReference.html#neos-fusion-join # If the value is empty (''), the key for sorting is set to __empty__ postion: 10 right: label: "Right" icon: "align-right" # Optionally use a data source: # If `dataSourceIdentifier` or `dataSourceUri` is defined, the `values` from above will be ignored dataSourceIdentifier: "some-datasource" dataSourceUri: "some/custom-route" dataSourceAdditionalData: foo: "bar" dataSourceDisableCaching: false ``` Credits ------- [](#credits) This package is inspired by: - [Carbon.ColorValues](https://github.com/CarbonPackages/Carbon.ColorValues) - [Shel.Neos.ColorPicker](https://github.com/Sebobo/Shel.Neos.ColorPicker) - [Kirby CMS toggles field](https://getkirby.com/docs/reference/panel/fields/toggles) - [I13e.ButtonEditor](https://github.com/ideenstadtwerke/I13e.ButtonEditor) ### Health Score 45 — FairBetter than 93% of packages Maintenance74 Regular maintenance activity Popularity28 Limited adoption so far Community14 Small or concentrated contributor base Maturity52 Maturing project, gaining track record Bus Factor1 Top contributor holds 60.3% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~37 days Recently: every ~85 days Total 22 Last Release 120d ago Major Versions v0.3.0 → v1.0.02024-10-04 ### Community Maintainers ![](https://www.gravatar.com/avatar/9684d477fcb2b45b91e1c92c7cf3d439388a4c555e2cfff10e5bc188226c4f2b?d=identicon)[beromir](/maintainers/beromir) --- Top Contributors [![jonnitto](https://avatars.githubusercontent.com/u/4510166?v=4)](https://github.com/jonnitto "jonnitto (79 commits)")[![beromir](https://avatars.githubusercontent.com/u/45039929?v=4)](https://github.com/beromir "beromir (49 commits)")[![robinroloff](https://avatars.githubusercontent.com/u/116283647?v=4)](https://github.com/robinroloff "robinroloff (3 commits)") --- Tags editorneoscmseditorflowNeosneoscms ### Embed Badge ![Health badge](/badges/beromir-neos-toggle-editor/health.svg) ``` [![Health](https://phpackages.com/badges/beromir-neos-toggle-editor/health.svg)](https://phpackages.com/packages/beromir-neos-toggle-editor) ``` ### Alternatives [shel/neos-colorpicker A plugin for Neos CMS which provides a colorpicker editor 1494.4k6](/packages/shel-neos-colorpicker)[shel/neos-hyphens A plugin for Neos CMS which provides hyphens for the inline editor 20200.7k1](/packages/shel-neos-hyphens)[techdivision/ckstyles Neos package which enables you adding your custom style classes for the CkEditor with a simple Yaml configuration 21166.3k](/packages/techdivision-ckstyles)[moc/notfound Neos CMS package that loads a normal editable page for displaying a 404 error 18167.5k](/packages/moc-notfound)[carbon/includeassets Include your assets (css, js) in an easy way into Neos 14228.6k10](/packages/carbon-includeassets)[shel/neos-workspace-module An alternative workspace module with additional features for Neos CMS 1738.6k1](/packages/shel-neos-workspace-module) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)