**General** We use [hx-boost](https://htmx.org/attributes/hx-boost/) on our body, which means that every link and every form is submitted without triggering a page reload. Instead, the content is fetched in the background and inserted into the `#main-content` div. You can see this by opening up your network tab in dev tools and clicking on a link. Our approach is outlined fully in [Working With HTMX](/docs/h1-rails/articles/htmx.md) This means that, as much as possible, we should build our apps using simple forms and links. For apps with a lot of state, this can mean passing the state through in the URL. **Pages with filters (state in the url)** Sometimes we want to build a page that has a lot of options for filtering. In this case we can use simple links that update the url when clicked. A good example of this is the [Hyperfly search results page](https://github.com/reallygoodsoftware/airline). Rails’ default url helpers are a little lacking here, so we’ve added a few more in H1 Rails, documented [here](https://hypergist.io/tony/working-with-urls). **Multi Step Forms (state in the database)** A very common pattern is bringing a user through a series of steps. The go-to here is to create an object in the database from ***before*** the data entry starts - then use simple form submissions and conditional validations. We’ve written a simple tutorial [here](https://docs.base-styles.com/h1rails/form_patterns). **Forms with nested relationships** Another common UX is having forms that allow you to add new rows of items. This can get tricky but we’ve created a pattern that works well. There’s a brief explanation of using `accepts_nested_attributes_for` along with `fields_for` in [this tutorial](https://docs.h1rails.com/h1rails/form_patterns#nested-relationships), and you can also look at the demo and code with the following links. * [Demo](https://demo.h1rails.com/demos/has_many_form) * [Code](https://github.com/reallygoodsoftware/h1rails/blob/master/app/views/h1rails/demos/has_many_form.html.erb)

**Text Inputs** Normal text input elements inside a form with the `ui-form` class - base styles will take care of styling. ```html ``` **Text Inputs with floating labels** Base Styles lets us have labels that appear as placeholders when a text input is focussed. ```html ``` **\*Phone Number Inputs** We’re currently using a mini js component for this but I’m not super happy and would like to improve it. It can be found in the Navan codebase and the AddOne codebase. **Simple Selects** When your select only has a few options and doesn’t require searching or selecting multiple options, a normal select element in a form with the `ui-form` class. ```jsx ``` **Custom Selects** If we need to have searchable options, multiple options, or loading data in remotely, we can use the Select.js preact component. * Read More: [https://github.com/reallygoodsoftware/h1rails/blob/master/docs/h1-rails/articles/broken-reference/README.md](https://github.com/reallygoodsoftware/h1rails/blob/master/docs/h1-rails/articles/broken-reference/README.md "mention") **File Uploads** Most of the time we default to using [Dropzone](https://www.dropzone.dev/) instead of the native file upload. Read the article [here](https://hypergist.io/tony/file-uploads-with-dropzone) on how to set this up correctly. ```html ``` **Simple Date Pickers** For simple date pickers we can use the native browser date picker. Add the onfocus attribute for better UX to trigger it when clicked. ```html ``` **\*Custom Date Pickers** I haven’t fully explored the options here, but we’ve used [Flatpickr](https://flatpickr.js.org/) in Miguel’s Navan project which seemed to work well. I would love to build a version of `` also which builds on the work Caleb Porzio is doing with his flux Date Picker

Loading States

We use [HTMX’s built-in loading indicator](https://htmx.org/attributes/hx-indicator/) feature to show loading spinners. To do this, we add a class of `.shown-while-loading` to the loading icon. **On Forms** ```erb <%= form_with model: @user, url: user_path(@user.id), html: {class:"ui-form"} do |form| %> <%= form.button class: "ui-button --solid" do |button| %> Save <%= inline_svg_tag("heroicons/check.svg") %> <%= inline_svg_tag("misc/spinner.svg",class:"shown-while-loading") %> <% end %> <% end %> ``` **On Buttons** Forms work out of the box, but for links you have to tell htmx which element to apply the behaviour to, with `hx-indicator=this`. ```erb New Category <%= inline_svg_tag("heroicons/plus.svg") %> <%= inline_svg_tag("misc/spinner.svg",class:"shown-while-loading") %> ```

Other Patterns

**Modals** Modal styling is powered by Base Styles, and functionality is powered by H1 Rails. Implementing a modal is one line of code in the controller. Documentation [here](/docs/h1-rails/modals.md). **Toasts** Toast styling is powered by Base Styles, and functionality is powered by H1 Rails. Creating toasts is one line of code in the controller. Documentation [here](https://docs.h1rails.com/h1rails/toasts). **Simple Tooltips** We use [Base Styles tooltips](https://1jxpn.hatchboxapp.com/all) for this. **Rich Tooltips** Mini js works very well for this, because we are just toggling a class on an element on mouseenter/mouseleave. ```html TODO: Finish this example

``` **\*Sortable Lists** We don’t currently have a go to for sortable lists. **Type to search** The go-to for this is htmx using a form with `hx-trigger="input changed from:#el"` ```html ``` **Dependent Selects** This is when changing one dropdown updates the options in another one. This is generally done a case by case basis. HTMX has a pattern which they outline [here](https://htmx.org/examples/value-select/). We’ve also done another pattern using Mini Js on the [Hyperfly](https://hyperfly.reallygoodsoftware.net/) home page.