Skip to content
Flex Demo
Flex Demo
Sign out
Flex Demo
Flex Forms
Forms
Settings & Tools
FLEX FIELDS
{"format":1,"component":"flex-catalog-layout","stylesheets":["https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/css/flex-catalog.css"],"chunks":[],"sizes":{"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/css/flex-catalog.css":37181},"factoryOwners":{}}
{"format":1,"component":"flex-catalog-detail","stylesheets":["https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/css/overlay-runtime.css","https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/css/teleported-menu.css","https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/css/flex-catalog.css"],"chunks":["https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-catalog-detail.js","https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-flex-dropdown-coordinator-PX45RHEK.js","https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-observability-ZSQ5ZUOF.js","https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-overlay-backdrop-SIZG7TPM.js","https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-overlay-picker-lifetime-TIEM4SYP.js","https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-runtime-lifecycle-effect-errors-TTAFSIST.js","https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-runtime-lifecycle-resource-scope-3CAAIJTV.js","https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-teleported-menu-position-OCN7C4TI.js","https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-theme-utils-NVH3CBRX.js"],"sizes":{"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-catalog-detail.js":1906,"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-flex-dropdown-coordinator-PX45RHEK.js":3750,"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-observability-ZSQ5ZUOF.js":206,"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-overlay-backdrop-SIZG7TPM.js":66495,"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-overlay-picker-lifetime-TIEM4SYP.js":727,"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-runtime-lifecycle-effect-errors-TTAFSIST.js":225,"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-runtime-lifecycle-resource-scope-3CAAIJTV.js":2918,"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-teleported-menu-position-OCN7C4TI.js":1801,"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-theme-utils-NVH3CBRX.js":561,"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/css/flex-catalog.css":37181,"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/css/overlay-runtime.css":4731,"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/css/teleported-menu.css":10302},"factoryOwners":{"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-catalog-detail.js":{"package":"janczakb/filament-flex-fields","component":"flex-catalog-detail","export":"default","abi":1}}}
{"format":1,"component":"segment-tabs","stylesheets":["https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/css/segment-control.css","https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/css/segment-tabs.css"],"chunks":["https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/segment-tabs.js","https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-components-segments-runtime-66KI3FPY.js","https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-runtime-lifecycle-effect-errors-TTAFSIST.js","https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-runtime-lifecycle-resource-scope-3CAAIJTV.js","https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-segment-indicator-KLHWJSOK.js","https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-virtual-first-paint-v1-segment-ZEPKOTRI.js"],"sizes":{"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-components-segments-runtime-66KI3FPY.js":4939,"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-runtime-lifecycle-effect-errors-TTAFSIST.js":225,"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-runtime-lifecycle-resource-scope-3CAAIJTV.js":2918,"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-segment-indicator-KLHWJSOK.js":565,"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/flex-fields-virtual-first-paint-v1-segment-ZEPKOTRI.js":930,"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/segment-tabs.js":1365,"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/css/segment-control.css":17500,"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/css/segment-tabs.css":2224},"factoryOwners":{"https://demo.bjanczak.com/filament-flex-fields-assets/core/9eb41b3369bb29a7f527ea7de2a2814ad0f96cb5fb62a64160ba1e512aad0f2e/components/segment-tabs.js":{"package":"janczakb/filament-flex-fields","component":"segment-tabs","export":"default","abi":1}}}
FLEX
Status chip column
Status chip column
FLEX
Validate
Dump JSON
Reset defaults
Included
Read-only table presentation with configurable appearance and empty states.
Demo
Code Example
Information
StatusChipColumn
Record
StatusChipColumn
Onboarding checklist
In progress
Contract renewal
Pending review
Approved
Approved
Not provided
—
Loading code examples…
Try again
Information
Developer
FLEX
Category
Data display
Website