# Filament Flex Fields

> Comprehensive SaaS-inspired UI components, form fields, and layouts for Filament.

## Docs

- [AddressAutocompleteField](https://flex-fields.bjanczak.com/docs/addressautocompletefield.md): Mapbox-powered address search without a map — combobox autocomplete with structured or string storage.
- [AudioField](https://flex-fields.bjanczak.com/docs/audiofield.md): Compact audio player with waveform visualization, play/pause control, and optional loop.
- [BarcodeScannerField](https://flex-fields.bjanczak.com/docs/barcode-scanner-field.md)
- [CalculatorField](https://flex-fields.bjanczak.com/docs/calculator-field.md): Numeric input with a shared iOS-style calculator panel, per-field session memory, and full numeric constraints.
- [ChoiceCards](https://flex-fields.bjanczak.com/docs/choicecards.md): Single-select card group with rich options, layouts, and Material-style ripple effects.
- [ChoiceCheckboxCards](https://flex-fields.bjanczak.com/docs/choicecheckboxcards.md): Multi-select card group with rich options, selection limits, and animated checkmark indicators.
- [ColorSwatchField](https://flex-fields.bjanczak.com/docs/colorswatchfield.md)
- [CountryField](https://flex-fields.bjanczak.com/docs/countryfield.md): Searchable country picker with circle flags and ISO 3166-1 alpha-2 code storage.
- [CoverCard](https://flex-fields.bjanczak.com/docs/covercard.md): Media card for hero banners, product tiles, and CTA blocks with background images and gradients.
- [CreditCardField](https://flex-fields.bjanczak.com/docs/creditcardfield.md): High-fidelity credit card input with real-time validation, Luhn check, and interactive card preview.
- [CurrencyField](https://flex-fields.bjanczak.com/docs/currencyfield.md): Revolut-style currency input with locale-aware formatting, digit animations, optional currency picker, and minor-unit storage.
- [Date & time fields](https://flex-fields.bjanczak.com/docs/date-and-time-fields.md)
- [Deprecated class aliases](https://flex-fields.bjanczak.com/docs/deprecated-class-aliases.md)
- [DualListboxField](https://flex-fields.bjanczak.com/docs/duallistboxfield.md): Dual-pane selection tool with search, reordering, and virtual scrolling.
- [FlexMatrixTable](https://flex-fields.bjanczak.com/docs/flex-matrix-table.md): High-performance matrix input for bulk data entry in a structured grid.
- [FlexChecklist](https://flex-fields.bjanczak.com/docs/flexchecklist.md): Multi-select checklist with row animations, icons, descriptions, and locked disabled options.
- [FlexColorPickerField](https://flex-fields.bjanczak.com/docs/flexcolorpickerfield.md): Full-featured color picker with advanced HSV panel, eyedropper, and preset grid layouts.
- [FlexFileUpload & FlexImageUpload](https://flex-fields.bjanczak.com/docs/flexfileupload-and-fleximageupload.md)
- [FlexRadiolist](https://flex-fields.bjanczak.com/docs/flexradiolist.md): Enhanced radio list with icons, descriptions, and custom sizing.
- [FlexSlider](https://flex-fields.bjanczak.com/docs/flexslider.md): Styled wrapper around Filament's Slider with SaaS-like track, step dots, and server-rendered pips.
- [FlexTextareaField](https://flex-fields.bjanczak.com/docs/flextextareafield.md): Smart auto-sizing textarea with character counters, speech dictation, and emoji support.
- [FlexTextInput](https://flex-fields.bjanczak.com/docs/flextextinput.md): Single-line text input with pill layout, grouped action buttons, and optional toolbar features.
- [FlexVerificationCode](https://flex-fields.bjanczak.com/docs/flexverificationcode.md): OTP / verification code input with grouped digit boxes, paste support, and optional account-verify chrome.
- [Form layout patterns](https://flex-fields.bjanczak.com/docs/form-layout-patterns.md)
- [IconPickerField](https://flex-fields.bjanczak.com/docs/icon-picker-field.md): Searchable blade-icons picker with lazy SVG rendering, set filters, and virtual scrolling.
- [IconColumn](https://flex-fields.bjanczak.com/docs/iconcolumn.md): Read-only table column for displaying blade-icons with optional labels, colors, and sizes.
- [Filament Flex Fields](https://flex-fields.bjanczak.com/docs/index.md): 68 Filament v5 form components, layout primitives, and an optional JSON custom-field layer — one design system, lazy assets, zero Node.js in production.
- [ItemCard](https://flex-fields.bjanczak.com/docs/itemcard.md): List row for settings, navigation, and mixed action layouts with leading visuals and trailing controls.
- [ItemCardGroup](https://flex-fields.bjanczak.com/docs/itemcardgroup.md): Grouped list surface for multiple ItemCard rows with shared containers, headers, and row separators.
- [ItemCardStack](https://flex-fields.bjanczak.com/docs/itemcardstack.md): Layout component for vertically stacking ItemCards with consistent spacing.
- [Layout components — quick comparison](https://flex-fields.bjanczak.com/docs/layout-components-quick-comparison.md)
- [LinkPreviewField](https://flex-fields.bjanczak.com/docs/link-preview-field.md)
- [MapPickerField](https://flex-fields.bjanczak.com/docs/mappickerfield.md): Mapbox-powered address picker with geocoding search, draggable pin, and configurable stored fields.
- [MatrixChoiceField](https://flex-fields.bjanczak.com/docs/matrixchoicefield.md)
- [NpsField](https://flex-fields.bjanczak.com/docs/nps-field.md): NPS, CSAT, and Likert scale inputs with three visual variants.
- [NumberStepper](https://flex-fields.bjanczak.com/docs/numberstepper.md): Pill-shaped numeric control with − / + buttons and an animated NumberFlow display.
- [PhoneField](https://flex-fields.bjanczak.com/docs/phonefield.md)
- [PriceRangeField](https://flex-fields.bjanczak.com/docs/pricerangefield.md)
- [ProgressBar](https://flex-fields.bjanczak.com/docs/progressbar.md): Linear progress indicator with determinate, indeterminate, segmented delivery tracker, and pill-style variants.
- [ProgressCircle](https://flex-fields.bjanczak.com/docs/progresscircle.md): SVG circular progress with full-circle and semi-circle variants, gradient strokes, and optional card shell.
- [RatingColumn](https://flex-fields.bjanczak.com/docs/ratingcolumn.md): Visual star or icon rating display for Filament tables with fractional fill support.
- [RatingField](https://flex-fields.bjanczak.com/docs/ratingfield.md): Star or custom icon rating input with hover preview, semantic colors, and fractional read-only display.
- [ScheduleField](https://flex-fields.bjanczak.com/docs/schedule-field.md)
- [SegmentControl](https://flex-fields.bjanczak.com/docs/segmentcontrol.md): IOS-style single-select segmented control with sliding indicators, icons, and animated label expansion.
- [SegmentTabs](https://flex-fields.bjanczak.com/docs/segmenttabs.md): Schema layout component featuring iOS-style segmented tabs with per-tab form schemas and query-string persistence.
- [SelectField](https://flex-fields.bjanczak.com/docs/selectfield.md): Styled Filament Select with pill trigger, rich option rows, grid layout, and multi-select chips.
- [Shared Concepts](https://flex-fields.bjanczak.com/docs/shared-concepts.md)
- [SignatureField](https://flex-fields.bjanczak.com/docs/signaturefield.md)
- [SlugField & TitleSlugField](https://flex-fields.bjanczak.com/docs/slugfield-and-titleslugfield.md)
- [SocialLinksField](https://flex-fields.bjanczak.com/docs/social-links-field.md)
- [SwitchField](https://flex-fields.bjanczak.com/docs/switchfield.md): Boolean toggle with row and card layouts, badges, and ripple effects.
- [TagsField](https://flex-fields.bjanczak.com/docs/tags-field.md): Tag input with pill chips, inline remove buttons, and optional server-side suggestions.
- [TimezoneField](https://flex-fields.bjanczak.com/docs/timezonefield.md): Searchable IANA timezone picker with browser detection and UTC offset display.
- [TrackSlider](https://flex-fields.bjanczak.com/docs/trackslider.md): Minimalist track-based range slider with optional live value output.
- [TrafficSplit](https://flex-fields.bjanczak.com/docs/trafficsplit.md): Interactive percentage-based weight distributor for A/B testing and traffic allocation.
- [TranslatableFields](https://flex-fields.bjanczak.com/docs/translatablefields.md)
- [UserColumn](https://flex-fields.bjanczak.com/docs/usercolumn.md): Read-only table column for displaying users with avatars, names, and overlapping stacks.
- [UserSelect](https://flex-fields.bjanczak.com/docs/userselect.md): Rich user picker with avatars, email secondary line, verification badge, and names/tags multi-trigger.
- [VideoField](https://flex-fields.bjanczak.com/docs/videofield.md): Custom video player with optional YouTube embed, skip controls, PiP, fullscreen, and compact control layout.
- [VoiceNoteRecorderField](https://flex-fields.bjanczak.com/docs/voicenoterecorderfield.md): In-browser voice recorder with real-time visualizer, inline playback, and Filament storage integration.