Categorization Example
To hide/show the Address tab, toggle the Provide Address checkbox. To show yet another tab, click the Vegetarian checkbox.
- Demo
- Schema
- UI Schema
- Data
schema.json
{"type": "object","properties": {"firstName": {"type": "string","minLength": 3,"description": "Please enter your first name"},"secondName": {"type": "string","minLength": 3,"description": "Please enter your second name"},"vegetarian": {"type": "boolean"},"birthDate": {"type": "string","format": "date","description": "Please enter your birth date."},"nationality": {"type": "string","enum": ["DE","IT","JP","US","RU","Other"]},"provideAddress": {"type": "boolean"},"address": {"type": "object","properties": {"street": {"type": "string"},"streetNumber": {"type": "string"},"city": {"type": "string"},"postalCode": {"type": "string","maxLength": 5}}},"vegetarianOptions": {"type": "object","properties": {"vegan": {"type": "boolean"},"favoriteVegetable": {"type": "string","enum": ["Tomato","Potato","Salad","Aubergine","Cucumber","Other"]},"otherFavoriteVegetable": {"type": "string"}}}}}
uischema.json
{"type": "Categorization","elements": [{"type": "Category","label": "categoryLabelKey","elements": [{"type": "HorizontalLayout","elements": [{"type": "Control","scope": "#/properties/firstName"},{"type": "Control","scope": "#/properties/secondName"}]},{"type": "HorizontalLayout","elements": [{"type": "Control","scope": "#/properties/birthDate"},{"type": "Control","scope": "#/properties/nationality"}]},{"type": "Control","scope": "#/properties/provideAddress"},{"type": "Control","scope": "#/properties/vegetarian"}]},{"type": "Category","i18n": "address","elements": [{"type": "HorizontalLayout","elements": [{"type": "Control","scope": "#/properties/address/properties/street"},{"type": "Control","scope": "#/properties/address/properties/streetNumber"}]},{"type": "HorizontalLayout","elements": [{"type": "Control","scope": "#/properties/address/properties/city"},{"type": "Control","scope": "#/properties/address/properties/postalCode"}]}],"rule": {"effect": "SHOW","condition": {"scope": "#/properties/provideAddress","schema": {"const": true}}}},{"type": "Category","label": "Additional","elements": [{"type": "Control","scope": "#/properties/vegetarianOptions/properties/vegan"},{"type": "Control","scope": "#/properties/vegetarianOptions/properties/favoriteVegetable"},{"type": "Control","scope": "#/properties/vegetarianOptions/properties/otherFavoriteVegetable","rule": {"effect": "SHOW","condition": {"scope": "#/properties/vegetarianOptions/properties/favoriteVegetable","schema": {"const": "Other"}}}}],"rule": {"effect": "SHOW","condition": {"scope": "#/properties/vegetarian","schema": {"const": true}}}}]}
{"provideAddress": true,"vegetarian": false}
Stepper variant
- Demo
- Schema
- UI Schema
- Data
schema.json
{"type": "object","properties": {"firstName": {"type": "string","minLength": 3,"description": "Please enter your first name"},"secondName": {"type": "string","minLength": 3,"description": "Please enter your second name"},"vegetarian": {"type": "boolean"},"birthDate": {"type": "string","format": "date","description": "Please enter your birth date."},"nationality": {"type": "string","enum": ["DE","IT","JP","US","RU","Other"]},"provideAddress": {"type": "boolean"},"address": {"type": "object","properties": {"street": {"type": "string"},"streetNumber": {"type": "string"},"city": {"type": "string"},"postalCode": {"type": "string","maxLength": 5}}},"vegetarianOptions": {"type": "object","properties": {"vegan": {"type": "boolean"},"favoriteVegetable": {"type": "string","enum": ["Tomato","Potato","Salad","Aubergine","Cucumber","Other"]},"otherFavoriteVegetable": {"type": "string"}}}}}
uischema.json
{"type": "Categorization","elements": [{"type": "Category","label": "categoryLabelKey","elements": [{"type": "HorizontalLayout","elements": [{"type": "Control","scope": "#/properties/firstName"},{"type": "Control","scope": "#/properties/secondName"}]},{"type": "HorizontalLayout","elements": [{"type": "Control","scope": "#/properties/birthDate"},{"type": "Control","scope": "#/properties/nationality"}]},{"type": "Control","scope": "#/properties/provideAddress"},{"type": "Control","scope": "#/properties/vegetarian"}]},{"type": "Category","i18n": "address","elements": [{"type": "HorizontalLayout","elements": [{"type": "Control","scope": "#/properties/address/properties/street"},{"type": "Control","scope": "#/properties/address/properties/streetNumber"}]},{"type": "HorizontalLayout","elements": [{"type": "Control","scope": "#/properties/address/properties/city"},{"type": "Control","scope": "#/properties/address/properties/postalCode"}]}],"rule": {"effect": "SHOW","condition": {"scope": "#/properties/provideAddress","schema": {"const": true}}}},{"type": "Category","label": "Additional","elements": [{"type": "Control","scope": "#/properties/vegetarianOptions/properties/vegan"},{"type": "Control","scope": "#/properties/vegetarianOptions/properties/favoriteVegetable"},{"type": "Control","scope": "#/properties/vegetarianOptions/properties/otherFavoriteVegetable","rule": {"effect": "SHOW","condition": {"scope": "#/properties/vegetarianOptions/properties/favoriteVegetable","schema": {"const": "Other"}}}}],"rule": {"effect": "SHOW","condition": {"scope": "#/properties/vegetarian","schema": {"const": true}}}}],"options": {"variant": "stepper"}}
{"provideAddress": true,"vegetarian": false}
Stepper variant with navigation elements
- Demo
- Schema
- UI Schema
- Data
schema.json
{"type": "object","properties": {"firstName": {"type": "string","minLength": 3,"description": "Please enter your first name"},"secondName": {"type": "string","minLength": 3,"description": "Please enter your second name"},"vegetarian": {"type": "boolean"},"birthDate": {"type": "string","format": "date","description": "Please enter your birth date."},"nationality": {"type": "string","enum": ["DE","IT","JP","US","RU","Other"]},"provideAddress": {"type": "boolean"},"address": {"type": "object","properties": {"street": {"type": "string"},"streetNumber": {"type": "string"},"city": {"type": "string"},"postalCode": {"type": "string","maxLength": 5}}},"vegetarianOptions": {"type": "object","properties": {"vegan": {"type": "boolean"},"favoriteVegetable": {"type": "string","enum": ["Tomato","Potato","Salad","Aubergine","Cucumber","Other"]},"otherFavoriteVegetable": {"type": "string"}}}}}
uischema.json
{"type": "Categorization","elements": [{"type": "Category","label": "categoryLabelKey","elements": [{"type": "HorizontalLayout","elements": [{"type": "Control","scope": "#/properties/firstName"},{"type": "Control","scope": "#/properties/secondName"}]},{"type": "HorizontalLayout","elements": [{"type": "Control","scope": "#/properties/birthDate"},{"type": "Control","scope": "#/properties/nationality"}]},{"type": "Control","scope": "#/properties/provideAddress"},{"type": "Control","scope": "#/properties/vegetarian"}]},{"type": "Category","i18n": "address","elements": [{"type": "HorizontalLayout","elements": [{"type": "Control","scope": "#/properties/address/properties/street"},{"type": "Control","scope": "#/properties/address/properties/streetNumber"}]},{"type": "HorizontalLayout","elements": [{"type": "Control","scope": "#/properties/address/properties/city"},{"type": "Control","scope": "#/properties/address/properties/postalCode"}]}],"rule": {"effect": "SHOW","condition": {"scope": "#/properties/provideAddress","schema": {"const": true}}}},{"type": "Category","label": "Additional","elements": [{"type": "Control","scope": "#/properties/vegetarianOptions/properties/vegan"},{"type": "Control","scope": "#/properties/vegetarianOptions/properties/favoriteVegetable"},{"type": "Control","scope": "#/properties/vegetarianOptions/properties/otherFavoriteVegetable","rule": {"effect": "SHOW","condition": {"scope": "#/properties/vegetarianOptions/properties/favoriteVegetable","schema": {"const": "Other"}}}}],"rule": {"effect": "SHOW","condition": {"scope": "#/properties/vegetarian","schema": {"const": true}}}}],"options": {"variant": "stepper","showNavButtons": true}}
{"provideAddress": true,"vegetarian": false}