Inputs
Form components — text fields, selectors, toggles, pickers and editors
Button
6 variants × 3 sizes — all server-rendered, no JS required
ButtonGroup
Unified button bar — borders collapse between adjacent buttons
Horizontal (default)
With text labels
Vertical
CopyButton
Click to copy — icon swaps to checkmark for feedback duration
mix phx.new my_app --no-ecto
sk-ant-api03-example-key
Switch
Controlled on/off toggles with aria-checked
Email Notifications
Receive alerts about your account
Marketing Emails
Receive news and promotions
Airplane Mode
Disable all wireless connections
Slider
Range input with live value display — keyboard accessible
Rating
Star rating — click to set, server-controlled
Product Rating
4 / 5 stars selected
Read-only (4.5 stars)
SegmentedControl
Mutually exclusive tab-style selector — radio inputs, zero JS
Selected: month
Toggle & ToggleGroup
Pressed-state buttons for toolbars — aria-pressed managed automatically
Text Formatting
Active: Bold
Alignment (ToggleGroup single)
Chip
Compact interactive labels — filter chips with selected state
Filter: all
Input & Textarea
Basic text inputs with label, placeholder and disabled states
Max 500 characters
PasswordInput & NumberInput
Specialised inputs — password reveal toggle and numeric stepper
Click the eye icon to reveal
ColorPicker
Native color wheel with hex preview — triggers phx-change on selection
Selected Color
#6366f1
InputOtp
One-time password slots — focus advances automatically on digit entry
Enter the 6-digit code sent to your device
InputAddon
Prefix/suffix decorations for contextual inputs
MultiSelect
Multi-value native select with chip-style display
Selected: elixir, phoenix
Combobox
Searchable select with live filtering — keyboard navigable
Checkbox & RadioGroup
PhiaUI checkbox and radio_group + radio_group_item components
Checkbox
RadioGroup & RadioGroupItem
DatePicker
Single-date calendar popover — server-controlled, zero JS
No date selected. Click to open calendar.
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
| Su | Mo | Tu | We | Th | Fr | Sa |
|---|---|---|---|---|---|---|
TagsInput
Tag chips — manual fallback demo (full version uses Phoenix.HTML.FormField)
Use .form + FormField for full functionality
FileUpload
Drag-and-drop zone — wires to allow_upload/3 in LiveView
Documents
Select (native)
HTML select with semantic styling
AutocompleteInput
Text input with native HTML5 datalist suggestions — no JS required
Type to see browser suggestions
Uses {label, value} tuples
PhoneInput
Phone number input with country dial-code prefix selector — ~50 countries included
Select a country code and type a number
Disabled state — both selector and input
SearchInput
Search field with magnifier icon, optional clear button and shortcut badge — 3 variants
Type to search — × button appears when non-empty
CopyInput
Read-only input with inline copy button — optional masking for secrets
Click the eye icon to reveal, copy button always copies the real value
ClearableInput
Text input with inline × clear button — disappears when empty
× button appears when non-empty
Without on_clear — works as a regular input
UrlInput
URL input with lockable protocol prefix — https:// or http://
Protocol defaults to https://
UnitInput
Numeric input with unit symbol — currency, percentage, weight, distance
TextareaCounter
Textarea with live character counter — color changes at 80% and over limit
InlineSearch
Icon button that expands to search input on click — collapses on Escape/blur
Click the search icon to expand
FancyButton, SplitButton, IconButton, SocialButton, ActionButton
Extended button variants — shimmer, split dropdown, icon-only, social, and action styles
FancyButton
IconButton
SocialButton