> ## Documentation Index
> Fetch the complete documentation index at: https://flex-fields.bjanczak.com/llms.txt
> Use this file to discover all available pages before exploring further.

> ## Agent Instructions
> Examples target Filament 5. Verify optional dependencies before configuring integrations.
> Upload transfer completion, permanent storage and record acceptance are separate milestones. Native and Spatie image conversions retain the original.

# Components

> Explore the complete FLEX Fields component library for Filament 5: form controls, layouts, table columns, infolist entries and actions, with real previews and PHP guides.

Form controls, layouts, table columns, infolist entries and actions for Filament. Browse component families, including controls without a recorded preview. Each component family has one card; its adapters, table columns and infolist variants are included in the same guide. Media OS rendering helpers and custom composition guides live in their own sections.

> **Watch FLEX Fields v4 in action · 4:26**
>
> A recorded tour of real FLEX components for Filament 5: pickers, uploads, image editing, maps, signatures and more.
>
> [FLEX Fields v4 — component showcase for Filament 5](https://www.youtube-nocookie.com/embed/BAV82Qg7-W4)
>
> [Watch on YouTube](https://www.youtube.com/watch?v=BAV82Qg7-W4)

[Text & Input9](#text-input)
[Choice & Selection20](#choice-selection)
[Number & Range7](#number-range)
[Date & Time7](#date-time)
[Media & Files7](#media-files)
[Color2](#color)
[Maps & Location8](#maps-location)
[Layout & Display9](#layout-display)
[Actions1](#actions)

Text & Input9

![Currency in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/currency-field.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=1c8cda76f658fc13d0f719ff15eab938)

**Currency**Revolut-style currency input with locale-aware formatting, digit animations, optional currency picker, and minor-unit storage.


[Open](https://flex-fields.bjanczak.com/docs/currencyfield.md)

![Calculator in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/calculator-field.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=810d2fae99332a2223da16bd238eb25e)

**Calculator**Numeric input with a shared iOS-style calculator panel, per-field session memory, and full numeric constraints.


[Open](https://flex-fields.bjanczak.com/docs/calculator-field.md)

![Textarea in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/flex-textarea.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=164a2a81c3d639507e8afe9f7fae5468)

**Textarea**Smart auto-sizing textarea with character counters, speech dictation, and emoji support.


[Open](https://flex-fields.bjanczak.com/docs/flextextareafield.md)

![Rich Editor in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/flex-rich-editor.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=00b14465e6ba0bddd94449be8fce5519)

**Rich Editor**Rich document editing, formatting, media and extensible content blocks.


[Open](https://flex-fields.bjanczak.com/docs/flex-rich-editor.md)

![Text Input in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/flex-text-input-emoji.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=0ee5c8a388155933f2969439c5f69127)

**Text Input**Versatile text inputs with shared styles, validation, sizes and visual variants.


[Open](https://flex-fields.bjanczak.com/docs/flextextinput.md)

![Title & Slug in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/slug-field.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=94481544ace5ba7dddc92f68808ffb6d)

**Title & Slug**Generate and edit URL slugs, independently or together with a title.


[Open](https://flex-fields.bjanczak.com/docs/slugfield-and-titleslugfield.md)

![Credit Card in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/credit-card.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=8e7e49922bddffcdc86cedbbfde99ee6)

**Credit Card**Credit card input with live brand detection, interactive preview and server-side Luhn validation.


[Open](https://flex-fields.bjanczak.com/docs/creditcardfield.md)

![Social Links in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/social-links-field.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=ba82da0ab69b9beb5adb4f37cdb00300)

**Social Links**Build a set of social links with platform icons and URL validation.


[Open](https://flex-fields.bjanczak.com/docs/social-links-field.md)

![Verification Code in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/verification-code.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=185a5a6f0cf1940f8dde163438b3761b)

**Verification Code**OTP / verification code input with grouped digit boxes, paste support, and optional account-verify chrome.


[Open](https://flex-fields.bjanczak.com/docs/flexverificationcode.md)

Choice & Selection20

![Phone in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/phone-field.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=7ce8ae0bd87ec9628f1cef44bf626cff)

**Phone**International phone numbers with searchable country codes and validation.


[Open](https://flex-fields.bjanczak.com/docs/phonefield.md)

![Country in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/country-field.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=159128b8ca41806a8d34ea02ee6e316a)

**Country**Search countries and territories with local flags; store a two-letter country code.


[Open](https://flex-fields.bjanczak.com/docs/countryfield.md)

![Font Select in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/font-select.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=01f8539adc3e58948f0872f703144dcf)

**Font Select**Search fonts with live previews, category filters and virtualized infinite scrolling.


[Open](https://flex-fields.bjanczak.com/docs/font-select.md)

![Timezone in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/timezone-field.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=044793fa7bc2108ea7dd2458a40ef9b1)

**Timezone**Search world time zones with local offsets and browser defaults.


[Open](https://flex-fields.bjanczak.com/docs/timezonefield.md)

![Choice Cards in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/choice-cards.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=b3d719fe777a5dd3b0f75662ee8fe3e5)

**Choice Cards**Present selectable cards with icons, labels, descriptions and checked states.


[Open](https://flex-fields.bjanczak.com/docs/choicecards.md)

![Image Choice Cards in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/image-choice-cards.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=8812fcb4a91b5a67015f1c4ac9b88cbe)

**Image Choice Cards**Select visual options with image cards, captions and consistent checked states.


[Open](https://flex-fields.bjanczak.com/docs/imagechoicecards.md)

![Choice Checkbox Cards in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/choice-checkbox-cards.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=6a6753ee34414c618c3a357c1cf5fb7b)

**Choice Checkbox Cards**Multiple-choice cards using the shared animated selection indicator.


[Open](https://flex-fields.bjanczak.com/docs/choicecheckboxcards.md)

![Segment Control in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/segment-control.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=2bfc8b8d2739c84df9811750046ce04e)

**Segment Control**Single-select segmented control with sliding indicators, icons, and animated label expansion.


[Open](https://flex-fields.bjanczak.com/docs/segmentcontrol.md)

![Switch in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/switch.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=876f52ebb623fceb920205bf2ad7b74d)

**Switch**Boolean toggle with row and card layouts, badges, and ripple effects.


[Open](https://flex-fields.bjanczak.com/docs/switchfield.md)

![Select in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/select-field.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=7caf0579359334f69a8a75bfa09880dd)

**Select**Rich selection with search, grouped options, virtual lists and remote pagination.


[Open](https://flex-fields.bjanczak.com/docs/selectfield.md)

![User Select in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/user-select.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=e708949d9c873e7bdea708badd97b8e6)

**User Select**Choose people with avatars, names, secondary details and multiple selection.Table column


[Open](https://flex-fields.bjanczak.com/docs/userselect.md)

![Dual Listbox in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/dual-listbox.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=2eecd0edbbfd202def875076ad3cf48c)

**Dual Listbox**Dual-pane selection tool with search, reordering, and virtual scrolling.


[Open](https://flex-fields.bjanczak.com/docs/duallistboxfield.md)

![Bubble Choice in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/bubble-choice.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=3042916bc402da871572a7d92bdb3dd9)

**Bubble Choice**Bubble multi-select with center magnification, fringe shrink on pan, and optional scalloped selection.


[Open](https://flex-fields.bjanczak.com/docs/bubblechoicefield.md)

![Icon Picker in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/icon-picker-field.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=7eafd195d74f09838cc1413f9f607d58)

**Icon Picker**Browse icons with search, list or grid layouts, virtual rendering and pagination.Table column


[Open](https://flex-fields.bjanczak.com/docs/icon-picker-field.md)

![Checklist in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/flex-checklist.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=02ce2d4c06602c4d2bc720a0b126777d)

**Checklist**Accessible single or multiple choices with configurable list presentations.


[Open](https://flex-fields.bjanczak.com/docs/flexchecklist.md)

![Todo List in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/todo-list-field.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=a103d3af3c25634ce84113822590431f)

**Todo List**Interactive task lists with completion, ordering and configurable feedback.


[Open](https://flex-fields.bjanczak.com/docs/todolistfield.md)

![Radiolist in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/flex-radiolist.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=4b172466c24e8285439e24b0bc3b69fe)

**Radiolist**Enhanced radio list with icons, descriptions, and custom sizing.


[Open](https://flex-fields.bjanczak.com/docs/flexradiolist.md)

![Matrix Table in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/flex-matrix-table.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=d9cad9b6fcc3d1a9ce501f65b18f98a1)

**Matrix Table**Edit structured choices in rows and columns with shared form controls.


[Open](https://flex-fields.bjanczak.com/docs/flex-matrix-table.md)

![Matrix Choice in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/matrix-choice.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=86f90b15c19c38991c49934947ae4e99)

**Matrix Choice**Explore matrix choice with configurable behavior, styling and live examples.


[Open](https://flex-fields.bjanczak.com/docs/matrixchoicefield.md)

![Tags in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/tags-field.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=5095f83884a2c87ab4a73b49ebc90819)

**Tags**Search, select and create tags, with an optional Spatie Tags adapter.Spatie optional


[Open](https://flex-fields.bjanczak.com/docs/tags-field.md)

Number & Range7

![Number Stepper in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/number-stepper.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=6dfee3fbc260c14be77fc42f218e5ea7)

**Number Stepper**Pill-shaped numeric control with − / + buttons and an animated NumberFlow display.


[Open](https://flex-fields.bjanczak.com/docs/numberstepper.md)

![NPS in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/nps-field.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=7c5b720b578abb4253ddf451f80aa48f)

**NPS**NPS, CSAT, and Likert scale inputs with three visual variants.


[Open](https://flex-fields.bjanczak.com/docs/nps-field.md)

![Track Slider in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/track-slider.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=6c4f8ffb20b2dcde0293239203cd502f)

**Track Slider**Minimalist track-based range slider with optional live value output.


[Open](https://flex-fields.bjanczak.com/docs/trackslider.md)

![Slider in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/flex-slider.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=0893bc25693eb77fe9089cc26dc9667a)

**Slider**Pill and circular sliders with elastic motion, rolling numbers, magnetic marks and validated ranges.


[Open](https://flex-fields.bjanczak.com/docs/flexslider.md)

![Traffic Split in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/traffic-split.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=4e006f4fe6cfb58a4c6c9052c5435c43)

**Traffic Split**Interactive percentage-based weight distributor for A/B testing and traffic allocation.


[Open](https://flex-fields.bjanczak.com/docs/trafficsplit.md)

![Rating in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/rating.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=202eca5497953595af35e3a5cdb0a702)

**Rating**Capture ratings with custom symbols, precision, labels and sizes.Table column


[Open](https://flex-fields.bjanczak.com/docs/ratingfield.md)

![Price Range in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/price-range.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=474cc938457d56d509055eb669af19c7)

**Price Range**Dual-handle price range slider with histogram backdrop, min/max numeric inputs, and currency prefix.


[Open](https://flex-fields.bjanczak.com/docs/pricerangefield.md)

Date & Time7

[`FlexDurationField`
**Duration**Enter elapsed time, including durations beyond 24 hours.
](https://flex-fields.bjanczak.com/docs/date-periods-and-duration)

![Month Picker in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/date-periods.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=81c7ad572351a4c65292b322162f46b3)

**Month Picker**Choose a calendar month and year.


[Open](https://flex-fields.bjanczak.com/docs/date-periods-and-duration.md)

[`FlexYearPicker`
**Year Picker**Select a year with configurable bounds.
](https://flex-fields.bjanczak.com/docs/date-periods-and-duration)

![Date & Time Picker in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/date-picker.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=d60599d09851cf6d57e3f167e167b86d)

**Date & Time Picker**Choose dates and times or use guided entry without a calendar popup.


[Open](https://flex-fields.bjanczak.com/docs/date-picker.md)

![Date Range in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/date-range-picker.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=519da63d1c1417e393066bb12fffe030)

**Date Range**Date ranges with custom shortcuts and optional start/end times.


[Open](https://flex-fields.bjanczak.com/docs/date-range-picker.md)

![Time Picker in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/time-picker.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=24e4bea92890eb583ef92619dab69b80)

**Time Picker**Clock inputs, segmented entry and start/end time ranges.


[Open](https://flex-fields.bjanczak.com/docs/time-picker.md)

![Schedule in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/schedule-field.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=aec355db63c34de4f7b4b4e33c531713)

**Schedule**Weekly availability, time ranges, breaks and time-zone aware configuration.Table columnInfolist


[Open](https://flex-fields.bjanczak.com/docs/schedule-field.md)

Media & Files7

![File Upload in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/file-upload-list.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=4880e434d54dc050d734e9fa851d0409)

**File Upload**Upload files and images as lists, grids or avatars. Optional Spatie Media Library storage.Spatie optional


[Open](https://flex-fields.bjanczak.com/docs/flexfileupload-and-fleximageupload.md)

![Video in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/video-field.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=e8d8930c12bda3dfae5f59f34e29c7cf)

**Video**Custom video player with optional YouTube embed, skip controls, PiP, fullscreen, and compact control layout.


[Open](https://flex-fields.bjanczak.com/docs/videofield.md)

![Audio in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/audio-field.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=e1d97d849915ec43d6db8bc9c35a3042)

**Audio**Compact audio player with waveform visualization, play/pause control, optional loop, and optional client-side Whisper speech-to-text.


[Open](https://flex-fields.bjanczak.com/docs/audiofield.md)

![Voice Note Recorder in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/voice-note-recorder-field.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=bcb4156d528f1a4625f0eac6a9bacc96)

**Voice Note Recorder**Record and upload voice notes through Media OS, with optional Spatie storage.Spatie optional


[Open](https://flex-fields.bjanczak.com/docs/voicenoterecorderfield.md)

![Link Preview in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/link-preview-field.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=e5c7ad509383f4f9aa384214c4ab5457)

**Link Preview**Explore link preview with configurable behavior, styling and live examples.


[Open](https://flex-fields.bjanczak.com/docs/link-preview-field.md)

![Barcode Scanner in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/barcode-scanner-field.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=98647cf9e7f5f599e1ce7e09f657826c)

**Barcode Scanner**Explore barcode scanner with configurable behavior, styling and live examples.


[Open](https://flex-fields.bjanczak.com/docs/barcode-scanner-field.md)

![Signature in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/signature-field.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=23c469d27f060d1233c25de948fa3524)

**Signature**Explore signature with configurable behavior, styling and live examples.Table column


[Open](https://flex-fields.bjanczak.com/docs/signaturefield.md)

Color2

![Color Swatch in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/color-swatch.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=2a1eb115e6558e3cc67efbad4a5bfe3a)

**Color Swatch**Preset color picker: horizontal swatch pills with optional section header and tooltips.


[Open](https://flex-fields.bjanczak.com/docs/colorswatchfield.md)

![Color Picker in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/flex-color-picker.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=9723942bdde7d6ff68c84b0b703b5193)

**Color Picker**Choose colors with an HSV area, channel sliders, formats and swatches.


[Open](https://flex-fields.bjanczak.com/docs/flexcolorpickerfield.md)

Maps & Location8

![Map Picker in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/map-picker-structured.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=d90be1f058cf04d97ec639f2be4f29a9)

**Map Picker**Search for addresses and choose a location with structured coordinates.Table column


[Open](https://flex-fields.bjanczak.com/docs/mappickerfield.md)

![Country Map in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/country-map-field.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=8b6947ae98060c0a73b0d6f032d8f48e)

**Country Map**Choose countries on an interactive world map with region selection and search.


[Open](https://flex-fields.bjanczak.com/docs/country-map-field.md)

![Map Zones in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/map-zones-polygon.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=129bb3aff6c3ab263cf50f982bcb5f02)

**Map Zones**Draw and edit polygons, rectangles and circles.


[Open](https://flex-fields.bjanczak.com/docs/map-zones.md)

![Map Markers in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/map-markers.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=862fb768a5875b0b440e07be7b4a8b52)

**Map Markers**Place, move and cluster multiple locations.


[Open](https://flex-fields.bjanczak.com/docs/map-markers.md)

![Map Editor in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/map-editor.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=206a4852c620c035c8eb4f34cb60a43e)

**Map Editor**Edit points, lines and zones in one geometry field.


[Open](https://flex-fields.bjanczak.com/docs/map-editor.md)

![Map Coordinates in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/map-coordinates.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=836241dbd40d57307701ac0416211c61)

**Map Coordinates**Choose coordinates without address geocoding.


[Open](https://flex-fields.bjanczak.com/docs/map-coordinates.md)

![Map Display in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/map-display.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=82db6c96b499d9669ca02c5f7d21eda2)

**Map Display**Display supplied layers with tooltips and legends.


[Open](https://flex-fields.bjanczak.com/docs/map-display.md)

![Address Autocomplete in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/address-autocomplete.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=9c9ab8a8084300188de00788e5c263d4)

**Address Autocomplete**Find addresses with shared search, structured results and configurable geocoding.


[Open](https://flex-fields.bjanczak.com/docs/addressautocompletefield.md)

Layout & Display9

[`ItemCard`
**Item Card**Configure Item Card for your Filament application.
](https://flex-fields.bjanczak.com/docs/itemcard)

[`ItemCardStack`
**Item Card Stack**Configure Item Card Stack for your Filament application.
](https://flex-fields.bjanczak.com/docs/itemcardstack)

![Segment Tabs in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/segment-tabs.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=eaaad996ce8aa5b7cdd5f4815eceede6)

**Segment Tabs**Compose form sections with animated tabs, nested schemas and persistent selection.


[Open](https://flex-fields.bjanczak.com/docs/segmenttabs.md)

[`StatusChipColumn`
**Status Chip Column**Read-only table presentation with configurable appearance and empty states.Table column
](https://flex-fields.bjanczak.com/docs/status-chip-column)

![Translatable Fields in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/translatable-fields.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=7b74845e383e8c0ad674fdbd8d06ef20)

**Translatable Fields**Build localized fields and switch between language-specific form states.


[Open](https://flex-fields.bjanczak.com/docs/translatablefields.md)

![Item Card Group in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/item-card-group.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=b9921210257ed8c1493aa2cd9fe2fff5)

**Item Card Group**Group content and actions into configurable card layouts.


[Open](https://flex-fields.bjanczak.com/docs/itemcardgroup.md)

![Cover Card in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/cover-card.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=a2a6a55322bc3739266ade36db687075)

**Cover Card**Present a cover image, title and description in a static card.


[Open](https://flex-fields.bjanczak.com/docs/covercard.md)

[`ProgressBar`
**Progress Bar**Present progress, targets and milestones with configurable visual states.Table column
](https://flex-fields.bjanczak.com/docs/progressbar)

![Progress Circle in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/progress-circle.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=9ae0080a175c2baeb17061172da14f22)

**Progress Circle**Circular progress displays with labels, colors and sizes.


[Open](https://flex-fields.bjanczak.com/docs/progresscircle.md)

Actions1

![Actions in the FLEX Fields playground](https://mintcdn.com/flex-fields/C-FFAuTlbhROGpHj/art/catalog/hold-confirm.webp?fit=max\&auto=format\&n=C-FFAuTlbhROGpHj\&q=85\&s=04f999a9f6b06bfcde9a83730c775e09)

**Actions**Configure FLEX actions, grouped menus and deliberate hold-to-confirm workflows.


[Open](https://flex-fields.bjanczak.com/docs/hold-confirm-action.md)

**Build around your application.**Connect storage and validation, translate your content or compose a reusable component. Each family guide covers its related variants and optional adapters.[Saving & validation ↗](https://flex-fields.bjanczak.com/docs/data-and-validation.md)[RTL support ↗](https://flex-fields.bjanczak.com/docs/rtl.md)[Extensions ↗](https://flex-fields.bjanczak.com/docs/extensions.md)[Media OS ↗](https://flex-fields.bjanczak.com/docs/media-capture-os.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.