PHIL UX

The 69 recipes of the PHIL UX kit for the Symfony UX Toolkit: Twig components and Stimulus controllers styled by phil-ux. Each page renders the recipe live, in light and dark, lets you try its variants, and gives the code to copy.

phil/ux-kit · phil/ux-css · phil/ux-kit-shadcn

Accordion Sections that open and close, on details and summary: they work without JavaScript, the browser keeping one open at a time; the controller adds the arrows, Home and End.
ActivityCalendar Activity over time: a cell per day, each read through its label, the colour never standing alone. Wider than the screen, it scrolls by itself and takes the focus to do so.
Alert A message that stands out: an error, a confirmation.
AlertDialog A question that interrupts, asked in a modal window on the native dialog element: Escape dismisses it, a click outside does not, and the focus starts on the answer that does no harm.
AnimatedButton A button, or a link when it has an address, that moves under the pointer and the focus: a light sweeping across it, a lift or its arrow pushed forward. Pure CSS.
AnimatedHeadline A headline whose words are revealed through a clip that closes to a caret and opens on the next word. One word is revealed once, then stands still; several are played through once and stop on the first, within five seconds; with loop, they keep cycling and a pause/play button stops them.
AspectRatio A box kept to a ratio, its picture or video covering it.
AutosaveStatus The status of a form's draft, for the autosave controller of phil/forms-autosave: a polite live region the controller writes what it did in — saved, restored, discarded —, and the notice of a restored draft or of a newer one saved from another device or tab, hidden until then, with its buttons. It is written inside a form whose tag carries the controller, which the option autosave: true of the form gives.
Avatar The picture of a person, over the initials that show when it is missing or broken, without script.
Badge A short label: a tag, a status, a count.
BeforeAfter Two pictures one above the other, the first cut where a slider says.
Breadcrumb Where the page sits in the site.
Button A button, or a link that looks like one with as="a".
ButtonGroup Buttons that belong together, joined: a view switcher, the previous and next periods.
Card A card: its picture, a header, its content and a footer.
Carousel Slides in a row, on native scroll snapping: they scroll by touch, trackpad and keyboard without JavaScript; the controller adds the buttons, the arrows and, on request, the automatic play. ::scroll-button() being in one engine alone, the buttons do not rely on it.
Chart A chart drawn by the server in SVG, bars or lines, with the table of its values.
ChartJs A chart of Symfony UX Chart.js in a figure, with its caption and the table of its values.
Checkbox A checkbox, drawn by phil-ux.
Collapsible A part of the page that opens and closes, on details and summary, without JavaScript.
ColorPicker The colour well of the browser, its hexadecimal value and swatches to choose from. The well is the field: it works alone without a script.
ComingSoon A "coming soon" page: the logo at the top of one column, a muted eyebrow, the animated headline and one or more paragraphs centred below it, and an illustration filling the other column. The columns stack on small screens, the illustration under the text.
CopyButton A button that copies a text, given or read from another element, and says so.
DatePicker The date field of the browser, which works alone, and a button opening a month on a grid, in a popover.
Dialog A modal window, on the native dialog element and its invokers: the browser makes the page inert, keeps the focus inside, closes it on Escape and gives the focus back.
DropdownMenu A menu of actions opened by a button, on the popover API: Escape and a click outside close it and the focus goes back to the button.
Empty What a list shows when it has nothing: a picture, a title, a sentence, and what to do.
Field A form field: its label, its control, its help and its errors, together; and sets of fields under a legend.
FileInput A file field that also takes a drop, listing what it holds with the size of each.
Gallery A gallery: a list of figures in a grid that fills its container, its columns as wide as the container allows, read by a container query; each image a Picture of the image recipe, under its caption, credit, license and creation; with lightbox, each opens in a Lightbox.
Illustration A figure showing one picture chosen among candidates, on the server: random by default, the same for the same seed. Each candidate is a URL, or a map of src, webp, alt, width and height.
Image An image of the content, in two components under the prop names of Symfony UX Image: Image, one img, and Picture, its sources in the order given, AVIF first, before that img. No JavaScript, no inline style: the sources are given whole, already produced. Two Twig functions of the bundle of phil/ux-kit serve them: image_origin(), which keeps the images of other hosts off the page unless their host is listed, and image_sources(), which reads the files of an image among the assets of AssetMapper.
Input A text field; any attribute reaches the element.
Item One entry of a list: its media, its title and description, its actions.
Kbd A key of the keyboard, or the keys of a shortcut, on the native kbd element.
Label The name of a form control.
Lightbox An image enlarged in a modal dialog: its thumbnail in a button that opens the native dialog by the invokers of HTML, command="show-modal" and commandfor; Escape, its close button and a click on its backdrop, closedby="any", close it, and the browser gives the focus back to the thumbnail. Its Stimulus controller, lightbox, stands in only where the browser runs neither the invokers nor closedby.
LoginForm A sign-in form in a card, for the form login of Symfony Security: the last user name written back, the error announced, the CSRF token and the links around it.
Logo A logo: a Picture of the image recipe, with an AVIF source then a WebP one when it has them, each a URL or a map of densities, its variant for a dark system and its still image where motion is reduced, linked to the home page when it has an href. {theme} and {locale} in its sources are replaced, so one line serves the logo of every theme and language.
NativeSelect The select element of the browser, dressed by phil-ux: the list of the system, on every device, without JavaScript.
NumberInput A number field with a button on each side.
Pagination The links between the pages of a list.
Popover A panel opened by a button, on the HTML popover API: it opens and closes, Escape and a click outside close it, without JavaScript; the controller places it next to its button.
Progress The progress of a task, on the native progress element: a value between zero and the maximum, or none while the end is unknown.
ProgressRing Progress as a ring, with the percentage in its centre. Pure CSS and SVG.
QrCode A QR code in a figure, with what it holds written beside it, a link for a web address, drawn on the server by phil/qr-code-bundle.
RadioGroup Radio buttons that share a name: the browser checks one at a time, moves between them with the arrows and submits it, without JavaScript.
Rating A note out of a number of stars: radio buttons with a name, a single image without one, in half stars.
ReactionButton One reaction of phil/reactions-bundle: a button that says it is pressed, its emoji or its image, its label for screen readers and its counter; or the same, as plain text, for a viewer who cannot press it. Any other attribute, such as the name and value of a form, goes on the button.
ReactionPicker The other reactions of phil/reactions-bundle: a disclosure of buttons grouped under their headings, which work with no script. The picker controller of the bundle adds a search by label, the arrow keys, Home, End and Escape. It is written inside the form that receives the buttons.
RelativeTime A moment written by the server as a date, then by a script as the time from now, which it keeps right.
ScrollArea A box whose content scrolls inside it, with thin scroll bars.
Select A list of options to choose one from, submitted as a field of the form when it has a name. For a page without JavaScript, the select element is styled by phil-ux on its own.
Separator A line between two parts of a page.
Sheet A panel sliding from an edge of the screen: a Dialog that keeps to one side, with the same controller.
SignupForm A sign-up form in a card: an optional name, the email address, the new password with its rule and its repetition, each field naming its errors.
Skeleton A placeholder for content on its way, hidden from screen readers; phil-ux stills it under prefers-reduced-motion.
Sparkline A small line of values, drawn by the server.
Spinner What shows while something loads; phil-ux stills it under prefers-reduced-motion.
Stepper The steps of a process, the finished ones marked, the current one announced, reading downwards on a phone.
Switch An on and off control: a checkbox with the role switch, which the browser checks and submits without JavaScript.
Table A table of data, which scrolls sideways inside its own box on a small screen.
Tabs Tabs over panels. Without JavaScript every panel shows; with it, one at a time, the arrows, Home and End moving between the tabs.
Tag A short label, which a button can take away.
Textarea A field of several lines.
Toggle A button that stays pressed, on a checkbox: the browser presses it and submits it with the form, without JavaScript.
ToggleGroup Toggles that belong together: radio buttons for one choice, checkboxes for several, submitted with the form, without JavaScript.
Tooltip A short description of a control, shown on hover and focus: it can be hovered, stays until left, and Escape dismisses it (WCAG 1.4.13).
Tree A tree of items, on the WAI-ARIA pattern.