Built-in Components
The components that ship with Phui, in the Phui\Components namespace. Each one is a normal Component — mount it with mount(), pass values with props(), and handle what it emits with on().
How built-ins work
They hold their own value. The value a built-in edits — a checkbox's checked, a slider's value — is a #[Model]: the component holds and updates it itself, and emits on every change. Pass it as a prop to make the parent the source of truth — handling its emit is then required — or leave it off and let the component run on its own. See binding a value both ways.
They render just the control. None of them draw a title, label or frame of their own beyond what their props describe, so wrap them in your own Container to caption or lay them out.
Their keys are defaults, not rules. Remap or remove any of them per instance with bindings() and Binding::none().
Their colours come from the theme. Every built-in resolves a *Colours object derived from the active Palette, overridable app-wide or per instance — see Theme Components. Each page below gives its colours and the palette role each one defaults to.
Focusable ones can be opted out. Pass focusable(false) to take an instance out of tab traversal; it still responds to the mouse.
Input & editing
- Button — a bordered label that emits
press - Checkbox — a
[✓]box bound to a boolean - TextInput — a single-line editor with selection and clipboard support
- TextArea — a multi-line editor with soft wrapping
- Select — a trigger opening a list where one option is chosen
- MultiSelect — the same, with several options ticked at once
- Slider — a track bound to an integer between a minimum and maximum
Lists & tables
- ItemList — a scrollable, virtualised list with a selected row
- ItemTable — a scrollable table of rows with a selected row
Display & feedback
- Alert — a coloured icon and message for one of four severities
- Reader — a scrolling, word-wrapped view of a long string
- Loader — an animated spinner between two labels
- ProgressBar — a bar filled to a fraction, with an optional percentage
- CountdownTimer — a label counting down once a second
Navigation
- Tabs — a row of labels, one of them current
- KeybindBar — the active keymap rendered as a hint bar