# Components

> Every component in LO-TEK, grouped by who creates the markup and whether a web component adds behaviour to it.

The components fall into three groups, split by who creates the markup and whether a web component adds behaviour to it. That decides what you write yourself and what the system does for you. The reasoning is in [Markup and behaviour](/markup-and-behaviour.md).

Every page shows the component in plain HTML and with the builder function in TypeScript, with code you can paste straight in. The web components also have tabs for React and Datastar, and most have one for Astro.

## CSS components

A class and a few data attributes on a plain HTML element. No JavaScript is loaded.

- [Accordion](/components/accordion.md)A panel that can be expanded, built on details and summary. CSS component with two classes and no JavaScript.
- [Alert](/components/alert.md)A message about the whole page or the whole form. CSS component with two classes and no JavaScript.
- [Avatar](/components/avatar.md)Profile picture or initials. A CSS component with two classes and no JavaScript.
- [Badge](/components/badge.md)Compact status badge. A CSS component with one class and no JavaScript.
- [Breadcrumbs](/components/breadcrumbs.md)A breadcrumb trail that shows where on the site the user is. A CSS component with one class and no JavaScript.
- [Button](/components/button.md)A button for actions. CSS component with one class and no JavaScript.
- [Card](/components/card.md)A box that groups content that belongs together. A CSS component with two classes and no JavaScript.
- [Checkbox](/components/checkbox.md)A checkbox for a choice that stands on its own. CSS component with two classes and no JavaScript.
- [Divider](/components/divider.md)A line between parts of the content. A CSS component with one class and no JavaScript.
- [Error Text](/components/error-text.md)Error message below a form field. A CSS component with one class and no JavaScript.
- [Fieldset](/components/fieldset.md)A group of controls with a shared label. CSS component with two classes and no JavaScript.
- [File Upload](/components/file-upload.md)A field for uploading files. A CSS component with two classes and no JavaScript.
- [Heading](/components/heading.md)Headings in six sizes, independent of level. A CSS component with one class and no JavaScript.
- [Help Text](/components/help-text.md)Explanatory text below a form field. A CSS component with one class and no JavaScript.
- [Icon](/components/icon.md)An icon from the app's own set, as large as the text around it. A CSS component with one class and no JavaScript.
- [Input](/components/input.md)A text field for forms, with states for valid and invalid. CSS component.
- [Label](/components/label.md)A label for form fields, with marking of required and optional. A CSS component.
- [Link](/components/link.md)Link style for navigation in running text. A CSS component with one class and no JavaScript.
- [List](/components/list.md)Bulleted lists, numbered lists and lists without bullets. A CSS component with one class and no JavaScript.
- [Pagination](/components/pagination.md)Page navigation for long lists. A CSS component with two classes and no JavaScript.
- [Paragraph](/components/paragraph.md)Body text and lead paragraphs with a limited line length. A CSS component with one class and no JavaScript.
- [Progress](/components/progress.md)A progress bar for something that has an end. CSS component with one class and no JavaScript.
- [Radio](/components/radio.md)Radio buttons for one choice among several. A CSS component with two classes and no JavaScript.
- [Search](/components/search.md)A search field with a magnifying glass. A CSS component with two classes and no JavaScript.
- [Select](/components/select.md)A dropdown list. CSS component with one class and no JavaScript.
- [Skeleton](/components/skeleton.md)A placeholder that shows the shape of content being loaded. A CSS component with one class and no JavaScript.
- [Skip Link](/components/skip-link.md)A link that skips past the menu to the main content. A CSS component with one class and no JavaScript.
- [Spinner](/components/spinner.md)A wait indicator for something in progress. CSS component with one class and no JavaScript.
- [Sr Only](/components/sr-only.md)Text only screen readers get. A CSS component with one class and no JavaScript.
- [Switch](/components/switch.md)A switch for a setting that takes effect immediately. CSS component with two classes and no JavaScript.
- [Table](/components/table.md)A table for data in rows and columns. CSS component with two classes and no JavaScript.
- [Tag](/components/tag.md)A tag for topics and filters. A CSS component with one class and no JavaScript.
- [Textarea](/components/textarea.md)A multi-line text field. A CSS component with one class and no JavaScript.
- [Toggle Group](/components/toggle-group.md)A group where one option is selected at a time. A CSS component with two classes and no JavaScript.
- [Tooltip](/components/tooltip.md)A small help text shown on hover and focus. CSS component with two classes and no JavaScript.

## Frame components

You write the markup, and the web component adds keyboard handling, focus and the wiring on top. The elements stay in the plain DOM.

- [Dialog](/components/dialog.md)Modal dialog built on the native dialog element. Six classes and no JavaScript, with an optional component for servers that cannot call showModal().
- [Error Summary](/components/error-summary.md)Collects the errors in a form and takes the user to the field that failed. Frame component.
- [Field](/components/field.md)Frame component that wires the label, field, help text and error text together for you.
- [Popover](/components/popover.md)Panel that hangs below a button and closes itself. Frame component.
- [Session Timeout](/components/session-timeout.md)Warns before a logged-in session expires, and counts down. You write the dialog, the component keeps the time.
- [Suggestion](/components/suggestion.md)Field with a suggestion list that narrows as the user types. Frame component.
- [Tabs](/components/tabs.md)Tab list of links to their panels. Frame component.

## Standalone components

The component creates its own content, because there is nothing for the server to send. You call a method.

- [Connection Status](/components/connection-status.md)Tells the user when the connection to the server is gone. Standalone component.
- [Toast](/components/toast.md)A queue of short messages in the corner of the screen. Standalone component.