---
title: "Cookbook"
description: "Short Firelight recipes, each with a live demo and its code: forms, data loading, dialogs, tabs, theming, drag and drop, animation and testing."
---

# Cookbook

Short recipes for common tasks, each with a live demo and its code. A recipe solves one problem and links to the guides for the ideas behind it.

## Forms and input

- [Form validation](https://roboz0r.github.io/Firelight/cookbook/form-validation/): check fields in F# on submit and show each error
  beside its field.
- [A custom form control](https://roboz0r.github.io/Firelight/cookbook/form-control/): a switch component that a page's `<form>`
  submits like a checkbox.
- [Search as you type](https://roboz0r.github.io/Firelight/cookbook/debounced-search/): search after a pause in typing, and drop
  requests for old text.

## Data

- [Fetch JSON](https://roboz0r.github.io/Firelight/cookbook/fetch-json/): load JSON with `fetch`, with loading, error and retry
  states.
- [Infinite scroll](https://roboz0r.github.io/Firelight/cookbook/load-more/): load the next page when the end of a list scrolls into
  view.
- [Remember state across visits](https://roboz0r.github.io/Firelight/cookbook/persist-state/): save F# values to `localStorage` and
  restore them on the next visit.

## Layout and components

- [Dark and light themes](https://roboz0r.github.io/Firelight/cookbook/theme-toggle/): system, light and dark themes from custom
  properties, remembered across visits.
- [A card with slots](https://roboz0r.github.io/Firelight/cookbook/slots/): a card that takes its heading, body and footer from the
  page.
- [A modal dialog](https://roboz0r.github.io/Firelight/cookbook/dialog/): ask a question with `<dialog>`, and read the answer when it
  closes.
- [Tabs](https://roboz0r.github.io/Firelight/cookbook/tabs/): tabs with the ARIA roles, arrow keys, and panels that keep their state.

## Behaviour

- [Toast notifications](https://roboz0r.github.io/Firelight/cookbook/toasts/): short messages that any code can raise, shown in one
  place.
- [Keyboard shortcuts](https://roboz0r.github.io/Firelight/cookbook/keyboard-shortcuts/): page-wide keys that skip fields, in a
  controller any component can use.
- [Drag to reorder](https://roboz0r.github.io/Firelight/cookbook/drag-reorder/): reorder a list by dragging, or with buttons from the
  keyboard.
- [Animating list changes](https://roboz0r.github.io/Firelight/cookbook/animate-list/): fade new items in, and slide the rest into
  place.

## Testing

- [Testing components](https://roboz0r.github.io/Firelight/cookbook/testing/): test the logic in plain F#, and the component in a
  browser with Playwright.