Skip to main content

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.

A recorded tour of real FLEX components for Filament 5: pickers, uploads, image editing, maps, signatures and more.

Watch on YouTube

Text & Input

9
Currency in the FLEX Fields playgroundCurrencyRevolut-style currency input with locale-aware formatting, digit animations, optional currency picker, and minor-unit storage.Calculator in the FLEX Fields playgroundCalculatorNumeric input with a shared iOS-style calculator panel, per-field session memory, and full numeric constraints.Textarea in the FLEX Fields playgroundTextareaSmart auto-sizing textarea with character counters, speech dictation, and emoji support.Rich Editor in the FLEX Fields playgroundRich EditorRich document editing, formatting, media and extensible content blocks.Text Input in the FLEX Fields playgroundText InputVersatile text inputs with shared styles, validation, sizes and visual variants.Title & Slug in the FLEX Fields playgroundTitle & SlugGenerate and edit URL slugs, independently or together with a title.Credit Card in the FLEX Fields playgroundCredit CardCredit card input with live brand detection, interactive preview and server-side Luhn validation.Social Links in the FLEX Fields playgroundSocial LinksBuild a set of social links with platform icons and URL validation.Verification Code in the FLEX Fields playgroundVerification CodeOTP / verification code input with grouped digit boxes, paste support, and optional account-verify chrome.

Choice & Selection

20
Phone in the FLEX Fields playgroundPhoneInternational phone numbers with searchable country codes and validation.Country in the FLEX Fields playgroundCountrySearch countries and territories with local flags; store a two-letter country code.Font Select in the FLEX Fields playgroundFont SelectSearch fonts with live previews, category filters and virtualized infinite scrolling.Timezone in the FLEX Fields playgroundTimezoneSearch world time zones with local offsets and browser defaults.Choice Cards in the FLEX Fields playgroundChoice CardsPresent selectable cards with icons, labels, descriptions and checked states.Image Choice Cards in the FLEX Fields playgroundImage Choice CardsSelect visual options with image cards, captions and consistent checked states.Choice Checkbox Cards in the FLEX Fields playgroundChoice Checkbox CardsMultiple-choice cards using the shared animated selection indicator.Segment Control in the FLEX Fields playgroundSegment ControlSingle-select segmented control with sliding indicators, icons, and animated label expansion.Switch in the FLEX Fields playgroundSwitchBoolean toggle with row and card layouts, badges, and ripple effects.Select in the FLEX Fields playgroundSelectRich selection with search, grouped options, virtual lists and remote pagination.User Select in the FLEX Fields playgroundUser SelectChoose people with avatars, names, secondary details and multiple selection.Table columnDual Listbox in the FLEX Fields playgroundDual ListboxDual-pane selection tool with search, reordering, and virtual scrolling.Bubble Choice in the FLEX Fields playgroundBubble ChoiceBubble multi-select with center magnification, fringe shrink on pan, and optional scalloped selection.Icon Picker in the FLEX Fields playgroundIcon PickerBrowse icons with search, list or grid layouts, virtual rendering and pagination.Table columnChecklist in the FLEX Fields playgroundChecklistAccessible single or multiple choices with configurable list presentations.Todo List in the FLEX Fields playgroundTodo ListInteractive task lists with completion, ordering and configurable feedback.Radiolist in the FLEX Fields playgroundRadiolistEnhanced radio list with icons, descriptions, and custom sizing.Matrix Table in the FLEX Fields playgroundMatrix TableEdit structured choices in rows and columns with shared form controls.Matrix Choice in the FLEX Fields playgroundMatrix ChoiceExplore matrix choice with configurable behavior, styling and live examples.Tags in the FLEX Fields playgroundTagsSearch, select and create tags, with an optional Spatie Tags adapter.Spatie optional

Number & Range

7
Number Stepper in the FLEX Fields playgroundNumber StepperPill-shaped numeric control with − / + buttons and an animated NumberFlow display.NPS in the FLEX Fields playgroundNPSNPS, CSAT, and Likert scale inputs with three visual variants.Track Slider in the FLEX Fields playgroundTrack SliderMinimalist track-based range slider with optional live value output.Slider in the FLEX Fields playgroundSliderPill and circular sliders with elastic motion, rolling numbers, magnetic marks and validated ranges.Traffic Split in the FLEX Fields playgroundTraffic SplitInteractive percentage-based weight distributor for A/B testing and traffic allocation.Rating in the FLEX Fields playgroundRatingCapture ratings with custom symbols, precision, labels and sizes.Table columnPrice Range in the FLEX Fields playgroundPrice RangeDual-handle price range slider with histogram backdrop, min/max numeric inputs, and currency prefix.

Date & Time

7
FlexDurationFieldDurationEnter elapsed time, including durations beyond 24 hours.Month Picker in the FLEX Fields playgroundMonth PickerChoose a calendar month and year.FlexYearPickerYear PickerSelect a year with configurable bounds.Date & Time Picker in the FLEX Fields playgroundDate & Time PickerChoose dates and times or use guided entry without a calendar popup.Date Range in the FLEX Fields playgroundDate RangeDate ranges with custom shortcuts and optional start/end times.Time Picker in the FLEX Fields playgroundTime PickerClock inputs, segmented entry and start/end time ranges.Schedule in the FLEX Fields playgroundScheduleWeekly availability, time ranges, breaks and time-zone aware configuration.Table columnInfolist

Media & Files

7
File Upload in the FLEX Fields playgroundFile UploadUpload files and images as lists, grids or avatars. Optional Spatie Media Library storage.Spatie optionalVideo in the FLEX Fields playgroundVideoCustom video player with optional YouTube embed, skip controls, PiP, fullscreen, and compact control layout.Audio in the FLEX Fields playgroundAudioCompact audio player with waveform visualization, play/pause control, optional loop, and optional client-side Whisper speech-to-text.Voice Note Recorder in the FLEX Fields playgroundVoice Note RecorderRecord and upload voice notes through Media OS, with optional Spatie storage.Spatie optionalLink Preview in the FLEX Fields playgroundLink PreviewExplore link preview with configurable behavior, styling and live examples.Barcode Scanner in the FLEX Fields playgroundBarcode ScannerExplore barcode scanner with configurable behavior, styling and live examples.Signature in the FLEX Fields playgroundSignatureExplore signature with configurable behavior, styling and live examples.Table column

Color

2
Color Swatch in the FLEX Fields playgroundColor SwatchPreset color picker: horizontal swatch pills with optional section header and tooltips.Color Picker in the FLEX Fields playgroundColor PickerChoose colors with an HSV area, channel sliders, formats and swatches.

Maps & Location

8
Map Picker in the FLEX Fields playgroundMap PickerSearch for addresses and choose a location with structured coordinates.Table columnCountry Map in the FLEX Fields playgroundCountry MapChoose countries on an interactive world map with region selection and search.Map Zones in the FLEX Fields playgroundMap ZonesDraw and edit polygons, rectangles and circles.Map Markers in the FLEX Fields playgroundMap MarkersPlace, move and cluster multiple locations.Map Editor in the FLEX Fields playgroundMap EditorEdit points, lines and zones in one geometry field.Map Coordinates in the FLEX Fields playgroundMap CoordinatesChoose coordinates without address geocoding.Map Display in the FLEX Fields playgroundMap DisplayDisplay supplied layers with tooltips and legends.Address Autocomplete in the FLEX Fields playgroundAddress AutocompleteFind addresses with shared search, structured results and configurable geocoding.

Layout & Display

9
ItemCardItem CardConfigure Item Card for your Filament application.ItemCardStackItem Card StackConfigure Item Card Stack for your Filament application.Segment Tabs in the FLEX Fields playgroundSegment TabsCompose form sections with animated tabs, nested schemas and persistent selection.StatusChipColumnStatus Chip ColumnRead-only table presentation with configurable appearance and empty states.Table columnTranslatable Fields in the FLEX Fields playgroundTranslatable FieldsBuild localized fields and switch between language-specific form states.Item Card Group in the FLEX Fields playgroundItem Card GroupGroup content and actions into configurable card layouts.Cover Card in the FLEX Fields playgroundCover CardPresent a cover image, title and description in a static card.ProgressBarProgress BarPresent progress, targets and milestones with configurable visual states.Table columnProgress Circle in the FLEX Fields playgroundProgress CircleCircular progress displays with labels, colors and sizes.

Actions

1
Actions in the FLEX Fields playgroundActionsConfigure FLEX actions, grouped menus and deliberate hold-to-confirm workflows.
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 ↗RTL support ↗Extensions ↗Media OS ↗
Last modified on October 24, 2026