Catalog

All Lily components

Each component is implemented in HTML, Svelte, React, Vue, Blazor, and Nunjucks. Search by name or description.

Search components

Showing all components.

accordion-checkbox a checkbox option that reveals an accordion panel when checked
accordion-link an accordion link
accordion-list an accordion ordered list of list item components
accordion-list-item an accordion list item component
accordion-nav an accordion navigation area for collapsible accordion information
action-bar a contextual action bar that appears when items are selected, showing the selection count and bulk action buttons
action-bar-button one action button inside an action bar
action-group a group of action buttons that can collapse to an overflow menu when space is constrained
action-link a hyperlink styled as an action trigger
address-input an input for searching or manually entering an address
affix a wrapper that pins its content to a viewport position while the page scrolls
ai-label an indicator of AI instances that is a pathway to AI explainability
alert a status message for important information or feedback
alert-dialog a modal dialog for urgent messages requiring user acknowledgment
angle-slider-range-input a range input for selecting an angle in degrees
announcement-banner a banner highlighting important messages for all users
area-chart an area chart visualization showing sized components in continuous data
article-layout a top-level article wrapper that sets CSS custom properties for content column widths
aspect-ratio-container a container that maintains a fixed aspect ratio
autosuggest a text input that proposes matching options as users type
avatar an avatar indicator that shows an avatar image or avatar text
avatar-group a group of avatar components
avatar-image an avatar indicator inside image such as a user photo
avatar-text an avatar indicator inner text such as a user name
back-link a navigation link to return to a previous page
badge a small label for counts, statuses, or categories
banner a prominent message bar across the top of a page
banner-box a banner box that is inside a banner component, using flexbox horizontal
bar-chart a horizontal bar chart visualization for displaying data
beach-ball a decorative animated beach ball element
blockquote a block-level quotation with optional source citation
body-text a rendered text block within a content width container
breadcrumb-link one breadcrumb link in the trail
breadcrumb-list an ordered list of breadcrumb list items
breadcrumb-list-item one breadcrumb list item in the trail
breadcrumb-nav a navigation container for breadcrumb trail links
button a generic clickable button element
button-group a wrapper that groups related buttons together
button-input an input element of type button for form actions <input type="button">
byline an author attribution with publish and update timestamps
calendar-range-picker a picker for selecting a date range on a calendar
calendar-table a calendar table interactive grid for managing dates, days, etc. <table>
calendar-table-body a calendar table interactive grid tbody for managing dates, days, etc. <tbody>
calendar-table-foot a calendar table interactive grid tfoot for managing dates, days, etc. <tfoot>
calendar-table-head a calendar table interactive grid thead for managing dates, days, etc. <thead>
calendar-table-row a calendar table interactive grid row for managing dates, days, etc. <tr>
calendar-table-td a calendar table interactive grid data cell for managing dates, days, etc. <td>
calendar-table-th a calendar table interactive grid header cell for managing dates, days, etc. <th>
call-to-action a prominent prompt encouraging user action
caption a caption for a table or figure element
card a grouped content container with header, body, and footer areas
care-card a medical care instruction card with urgency levels
carousel a slideshow for cycling through content items
cascader a multi-level dropdown for selecting a value from a hierarchy
character a single character display element
character-counter a counter showing remaining or used characters in a text field
chat-list an ordered list of chat list item components
chat-list-item one chat list item component, typically containing one chat message component
chat-message a chat message shows one chat conversation message entry and all its data, including the author avatar, author name, time, etc.
chat-nav a navigation container for chat information
check-list an ordered list of check list item components
check-list-item one check list item component with a checkbox
checkbox-group a group component that manages a collection of checkboxes with shared state
checkbox-input a checkbox input for toggling a boolean value <input type="checkbox">
citation a citation acknowledges the relevance of a work of another to the topic of discussion
clamp-text a text container that truncates content to a maximum number of lines
clipboard-copy-button a button that copies text to the clipboard
coachmark an anchored popover that spotlights and explains a single feature
code an inline code span for displaying short code snippets within surrounding text
code-block a block of formatted code with optional line numbers and line highlighting
collapsible a container that can be expanded or collapsed
collection-list a compact list of multiple related items such as articles or events
collection-list-item one item in a collection list with optional image, heading, meta, and description
color-input an input for selecting a color value <input type="color">
color-picker a two-dimensional board for picking colors by hue and saturation
color-picker-button a button showing a color swatch in a color picker
column-chart a vertical column chart visualization for displaying data
combobox a text input combined with a dropdown list for filtering options
command a command palette for searching and executing actions
comment a comment displays user discussions and user feedback
container a generic block-level content container
container-with-fixed-width a centered content wrapper with a fixed max-width breakpoint
container-with-fluid-width a full-width content wrapper with horizontal padding
content-block a content width constraint container with named column widths
contents-link one table of contents link
contents-list an contents ordered list of contents list item components
contents-list-item one contents list item
contents-nav a contents navigation area
context-menu a menu that appears on right-click or long-press
context-menu-item one item in a context menu
contextual-help a help button that opens a popover with explanatory content
currency-input a locale-aware currency input with automatic formatting, symbols, separators
data-filter-form a form for filtering data by criteria
data-table a data table interactive grid for displaying and sorting tabular data <table>
data-table-body a data table interactive grid tbody for displaying and sorting tabular data <tbody>
data-table-foot a data table interactive grid tfoot for displaying and sorting tabular data <tfoot>
data-table-head a data table interactive grid thead for displaying and sorting tabular data <thead>
data-table-row a data table interactive grid row for displaying and sorting tabular data <tr>
data-table-td a data table interactive grid data cell for displaying and sorting tabular data <td>
data-table-th a data table interactive grid header cell for displaying and sorting tabular data <th>
date-field a structured field for entering date components
date-input an input for entering a date value <input type="date">
date-range a display of a start and end date range
date-time-local-input an input for entering a date and time without time zone <input type="datetime-local">
date-time-now-input an input for entering a date and time and "now" button <input type="date"><input type="time"><button type="button">
date-time-view a read-only display of a formatted date and time
description-list a definition list displaying information in key-value format <dl>
description-list-item one key-value pair in a description list using dt and dd elements
details a disclosure widget that shows and hides content
dial a rotary dial control for selecting a value
dial-group a group of dial components
dialog a modal or non-modal dialog window
diff a side-by-side comparison of two items
digital-object-identifier-link a permanent hyperlink for a Digital Object Identifier (DOI) to an electronic source
do-list a guideline list of encouraged do-list-item components
do-list-item an encouraged-practice item in a do-list guideline list
document-list a list displaying documents with titles and metadata
document-list-item one document entry in a document list
dont-list a guideline list of discouraged dont-list-item components
dont-list-item a discouraged-practice item in a dont-list guideline list
download-button a download link styled as a button, with optional file size and format metadata
drawer a panel that slides in from the edge of the screen
dropdown-menu a menu that opens below a trigger button
editable an inline-editable text element that toggles between view and edit modes
editable-form a form wrapper for inline editing of content
email-input an input for entering an email address <input type="email">
email-link a mailto hyperlink for an email address
emoji a single emoji character with accessible name
emoji-character-picker a picker for browsing and selecting emoji characters
end-notes a section of titled endnote items at the end of an article
error-message an error message associated with a form field
error-summary a summary of all validation errors on a form
espana-tarjeta-sanitaria-individual-input an input for entering an España Tarjeta Sanitaria Individual (TSI) unique national healthcare identifier
espana-tarjeta-sanitaria-individual-view a read-only display of an España Tarjeta Sanitaria Individual (TSI) unique national healthcare identifier
event an event component that contains other event-related information
expander a control that expands to reveal more content
feature-card a large content card with a prominent image positioned alongside or above the text
feature-photo a responsive photo with lazy loading and alt text validation
field a form field wrapper with label, input, and error message
fieldset a group of related form fields with a legend
figure a self-contained figure with optional caption
file-dialog a dialog for browsing and selecting files
file-input an input for selecting files from the file system <input type="file">
file-manager a file browser for navigating and managing files
file-upload a drag-and-drop area for uploading files
five-face-rating-picker a picker for selecting a 1-5 satisfaction rating using face labels
five-face-rating-picker-button a picker button for selecting a 1-5 satisfaction rating using face labels
five-face-rating-view a read-only display of a five-face satisfaction rating
five-star-rating-picker a picker for selecting a 1-5 star rating using radio buttons
five-star-rating-picker-button a picker button for selecting a 1-5 star rating using radio buttons
five-star-rating-view a read-only display of a five-star rating
flair a decorative highlight or emphasis element
flex-stack a flex layout container for vertical or horizontal stacking with consistent gap
float-button a floating action button anchored to a viewport corner
floating-panel a panel that floats above page content
footer a page or section footer area
footnote a footnote reference and content element
form a form element for collecting and submitting user data
framer a container for framed content display with decorative border
france-numero-d-identification-au-repertoire-input an input for entering a France numéro d'identification au répertoire (NIR) unique national healthcare identifier
france-numero-d-identification-au-repertoire-view a read-only display of a France numéro d'identification au répertoire (NIR) unique national healthcare identifier
gantt-table a Gantt chart table interactive grid for planning schedule visualization <table>
gantt-table-tbody a Gantt chart table interactive grid tbody for planning schedule visualization <tbody>
gantt-table-td a Gantt chart table interactive grid data cell for planning schedule visualization <td>
gantt-table-tfoot a Gantt chart table interactive grid tfoot for planning schedule visualization <tfoot>
gantt-table-th a Gantt chart table interactive grid header cell for planning schedule visualization <th>
gantt-table-thead a Gantt chart table interactive grid thead for planning schedule visualization <thead>
gantt-table-tr a Gantt chart table interactive grid row for planning schedule visualization <tr>
go-to-next-section a link that takes users to the next section of the current page
go-to-previous-section a link that takes users to the previous section of the current page
go-to-top a link that returns users to the top of a long page
government-banner a banner identifying a website as belonging to a government, with an expandable details panel
government-identifier an identifier section with a parent agency logo, agency name, and required government links
grail-layout a responsive web design structure with header, left aside, center main, right aside, footer
grail-layout-bottom-footer grail layout bottom footer full width with <footer> tag
grail-layout-center-main grail layout center main content with <main> tag
grail-layout-left-aside grail layout left aside sidebar with <aside> tag
grail-layout-right-aside grail layout right aside sidebar with <aside> tag
grail-layout-top-header grail layout top header full width with <header> tag
graphic-block a wrapper for charts and graphics with title, description, notes, and ARIA description
grid a CSS grid layout container with configurable columns and gap
hamburger-menu a toggle button that opens a mobile navigation menu
header a page or section header area
headline a page headline with heading, subtitle, and byline area
hero a large box or image with a title and description
hero-headline a full-bleed hero section with headline overlaid on media
hidden-input a hidden input for including data in form submission <input type="hidden">
hint hint text providing guidance for a form field
horizontal-scroller a horizontally scrollable content container
hover-card a card that appears on hover over a trigger element
icon a container for displaying an icon
icon-button a button containing only an icon with a required accessible label
icon-list an ordered list of icon list item components
icon-list-item one item in an icon list with a leading icon slot
image an image element with alt text
image-file-input an input for selecting image files with preview
image-input a graphical submit button that displays an image <input type="image">
info-state a composition of illustration, title, description, and action for empty, error, or info states
information-callout a callout box highlighting informational content
input a generic HTML input element
input-group a group wrapping an input with prefix and suffix addons
input-with-mask an input displaying a format mask placeholder for the user to fill in
inset-text indented text to distinguish it from surrounding content
ireland-individual-health-identifier-input an input for entering Ireland Individual Health Identifier (IHI) unique national healthcare identifier
ireland-individual-health-identifier-view a read-only display of Ireland Individual Health Identifier (IHI) unique national healthcare identifier
kanban-table a kanban board table interactive grid for organizing items by status <table>
kanban-table-body a kanban board table interactive grid tbody for organizing items by status <tbody>
kanban-table-foot a kanban board table interactive grid tfoot for organizing items by status <tfoot>
kanban-table-head a kanban board table interactive grid thead for organizing items by status <thead>
kanban-table-row a kanban board table interactive grid row for organizing items by status <tr>
kanban-table-td kanban board table interactive grid data cell for organizing items by status <td>
kanban-table-th a kanban board table interactive grid header cell for organizing items by status <th>
kbd show keyboard shortcuts and key combinations in a styled inline element
label a label associated with a form input
line-chart a line chart visualization connecting data points to display data
listbox a list of selectable options with keyboard navigation
loading a loading indicator, such as text, or image, or animation
masonry a masonry layout container for variable-height items
measurement-instance-input an input for entering a measurement value and unit
measurement-instance-view a read-only display of a measurement value and unit
measurement-system-input an input for selecting a measurement system
measurement-system-view a read-only display of a measurement system
measurement-unit-input an input for selecting a measurement unit
measurement-unit-view a read-only display of a measurement unit
medical-banner a prominent message bar across the top of a page, with medical information
medical-banner-box a medical banner box that is inside a medical-banner component, using flexbox horizontal, with medical information
medical-banner-box-for-advice a medical record banner box for advice information e.g. contacts, contexts, plans, etc.
medical-banner-box-for-danger a medical record banner box for danger information e.g. reactions, warnings, alarms, etc.
mentions-input a text input with at-mention autocomplete suggestions
menu a list of actions or options triggered by a button
menu-bar a horizontal bar of menu triggers
menu-bar-button one item in a menu bar
menu-group a labeled section of menu items within a menu
menu-item one item in a menu
meter a gauge displaying a scalar value within a known range
mockup-browser a box area that looks like a web browser
mockup-laptop a box area that looks like a laptop computer
mockup-phone-landscape a box area that looks like a mobile phone in landscape orientation
mockup-phone-portrait a box area that looks like a mobile phone
mockup-shell a box area that looks like a terminal shell
mockup-tablet-landscape a box area that looks like a tablet computer in landscape mode
mockup-tablet-portrait a box area that looks like a tablet computer in portrait mode
mockup-watch a box area that looks like a smart watch
mockup-window a box area that looks like a desktop window
month-input an input for selecting a month and year <input type="month">
mutually-exclusive a container ensuring only one option can be selected from a group
navigation-menu a site-wide navigation menu with links
net-promoter-score-picker a picker for selecting a 0-10 Net Promoter Score
net-promoter-score-picker-button a picker button for selecting a 0-10 Net Promoter Score
net-promoter-score-view a read-only display of a Net Promoter Score
newsletter-signup an email subscription form composition with idle, submitting, success, and error states
northern-ireland-health-and-care-number-input an input for entering aNorthern Ireland Health and Care (H&C) Number unique national healthcare identifier
northern-ireland-health-and-care-number-view a read-only display of Northern Ireland Health and Care (H&C) Number unique national healthcare identifier
notification a brief message about an event or update
number-input an input for entering a numeric value with validation <input type="number">
option an option element within a select dropdown
organization an organization component that contains other organization-related information
overlay-container a full-viewport overlay backdrop for modals and sheets
padding-reset a container that resets padding inside fluid-width containers
pagination-link one pagination link in the trail
pagination-list an ordered list of pagination list items
pagination-list-item one pagination list item in the trail
pagination-nav an ordered list of page navigation links
panel a generic content panel with optional heading
password-input an input for entering a password with obscured text <input type="password">
password-input-or-text-input-div an input for entering a password <input type="password"> or text <input type="text"> with show/hide toggle
person a person component that contains other person-related information
phase-banner a banner showing service development phase and inviting feedback
photo-pack a collection of photos displayed together as a group
pictogram an icon-based component pairing an icon with a title and description in a centered or side layout
pin-input-div a series of single-digit inputs for entering a PIN or OTP code
place a place component that contains other place-related information
popconfirm-dialog a popover dialog with confirm and cancel buttons
popover a floating content box anchored to a trigger element
popup a temporary overlay that appears above page content
postal-code-input an input for entering a postal or ZIP code
postal-code-view a read-only display of a postal or ZIP code
product-card a specialized card for displaying a product with image, title, price, and actions
progress a horizontal progress bar showing completion
progress-bar a horizontal progress indicator
progress-circle a circular progress indicator
progress-spinner an indeterminate spinning progress indicator
qr-code a QR code image generated from text or URL data
radio-group a group of radio buttons for selecting one option
radio-input a single radio button input <input type="radio">
range-input a slider input for selecting a value within a range <input type="range">
red-amber-green-picker a picker for selecting a red/amber/green status
red-amber-green-picker-button a picker button for selecting a red/amber/green status
red-amber-green-view a read-only display of a red/amber/green status
red-orange-yellow-green-blue-picker a picker for selecting a five-level color status
red-orange-yellow-green-blue-picker-button a picker button for selecting a five-level color status
red-orange-yellow-green-blue-view a read-only display of a five-level color status
related-content a section providing links to related or supporting information
reset-input a button input that resets a form to default values <input type="reset">
resizable a container that the user can resize by dragging
review-date a display of a content review date
scatter-chart a scatter chart visualization using dots to display data
screen-reader-span a visually hidden span of text intended for screen readers to provide more descriptive labels
scroll-area a scrollable container with custom scrollbar support
scroll-bar a custom scrollbar element
scroller a scrollytelling container with step-based foreground and background composition
scroller-base a low-level scroll position tracking primitive for scrollytelling
scroller-video a video-driven scrollytelling component with frame-by-frame scrubbing
search-input an input for entering a search query <input type="search">
section-heading a styled heading introducing a major content section, with optional eyebrow and subtitle
section-link one section link in the navigation
section-list a list of section navigation items
section-list-item one section navigation item
section-nav a navigation container for section navigation links
segment-group a group of mutually exclusive segment options
segment-group-item one selectable segment in a segment group
select a dropdown select element for choosing one option
select-with-extras a select dropdown with additional features like search or groups
separator a horizontal or vertical divider between content sections
share-page a component for sharing the page on social media
sheet a panel that slides in from a screen edge as an overlay
sidebar a side panel for navigation or supplementary content
signature-pad a drawing area for capturing a handwritten signature
skeleton a placeholder loading animation for content
skip-link a hidden link for keyboard users to skip to main content
slide-out-drawer a drawer that slides out from the side of the page
slider a draggable control for selecting a value along a track
slider-button a button with a slider that the user needs to slide to confirm
sonner a toast notification manager
sparkline a small inline chart showing a data trend
split-button a button with a primary action and a dropdown for related actions
split-view a two-panel resizable layout container with a draggable divider between them
splitter a draggable divider for resizing adjacent panels
statistic a numeric value display with title, prefix, and suffix
status-light a small colored dot status indicator paired with a status label
status-tag a tag showing the current status of a task
step-list an ordered list of step items showing progress through a multi-step process
step-list-item one step in a step list with status of waiting, in progress, finished, or error
sticky-promo-banner a fixed-position promotional banner with a dismiss button
submit-input a button input that submits a form <input type="submit">
success-panel a panel confirming a task has been completed
summary-box a boxed callout highlighting key takeaways or next steps from a longer page
summary-list an ordered list of key-value summary pairs
summary-list-item one key-value pair in a summary list
super-banner a super-banner communicates a high-priority state that affects an entire app, experience, process, or system
switch-button a toggle switch for turning a setting on or off
tab-bar a group of tabs for switching between content panels
tab-bar-button one tab button in a tab group
tab-panel a content panel associated with a tab in a tab bar
table a table with rows and columns <table>
table-body a table interactive grid tbody <tbody>
table-foot a table interactive grid tfoot <tfoot>
table-head a table interactive grid thead <thead>
table-row a table interactive grid row <tr>
table-td a table interactive grid data cell <td>
table-th a table interactive grid column <th>
tag a keyword label for categorizing content
tag-group a group of tag elements
tag-input an input for adding and removing tags
task-bar a horizontal bar of task shortcuts or actions
task-bar-button one item in a task bar
task-list an ordered list of task list items
task-list-item one task item with a checkbox and label
tel-input an input for entering a telephone number <input type="tel">
tel-link a tel hyperlink for a telephone number
text-area-input a multi-line text input area
text-area-input-with-character-counter a multi-line text area input with a caption below that is a character counter "[number] of [maximum] characters"
text-input a single-line text input field <input type="text">
text-input-with-search a single-line text input field <input type="text"> with search capability
theme-picker a picker for selecting a visual theme
theme-picker-button a picker button for selecting a visual theme
theme-provider a container that applies CSS custom properties from a theme object to its children
theme-select a select dropdown for choosing a theme
theme-select-option one option in a theme select dropdown
theme-view a read-only display of the current theme
tile a grouping container that presents related content in a structured format, often as a single clickable area
tile-map a tile cartogram map with configurable layers for geographic data visualization
time-input an input for entering a time value <input type="time">
time-picker-input an input with a dropdown for picking a time
timeline-list an ordered list of chronological events or milestones
timeline-list-item one event in a timeline list
timeout-dialog a modal dialog warning users before session timeout
timer a countdown or elapsed time display
timer-button a button with a timer that will automatically click after a given amount of time
toast a brief auto-dismissing notification message
toggle-button a button that toggles between pressed and unpressed states
toggle-group a group of toggle buttons for selecting options
tool-bar a horizontal bar of tool actions
tool-bar-button one action button in a tool bar
tooltip a small popup showing descriptive text on hover or focus
tour a tour guide, such as for sightseeing, or pathways, or demonstrations, etc.
tour-list an ordered list of tour guide steps
tour-list-item one step in a tour guide list
transfer-list a dual list box for moving items between two lists
tree-link one link in the tree
tree-list a hierarchical list with nested expandable items
tree-list-item one item in a tree navigation list
tree-menu a hierarchical tree menu with expandable branches
tree-nav a hierarchical navigation with expandable branches
tree-select a select dropdown showing a tree of hierarchical options
united-kingdom-national-health-service-number-input an input for entering a UK NHS number
united-kingdom-national-health-service-number-view a read-only display of a UK NHS number
united-states-social-security-number-input an input for entering a US Social Security number
united-states-social-security-number-view a read-only display of a US Social Security number
url-input an input for entering a URL <input type="url">
validation-list a live-feedback list of input validation rules with pending, passed, and failed states
validation-list-item one validation rule in a validation list with a status of pending, passed, or failed
video-player a video player with play-in-view behavior, custom controls, and IntersectionObserver support
visible an IntersectionObserver wrapper that exposes element visibility state
warning-callout a callout box highlighting a warning message
watermark a decorative repeating overlay text or image marking a page
week-input an input for selecting a week and year <input type="week">