> ## Documentation Index
> Fetch the complete documentation index at: https://anvil.servicetitan.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Introducing Adaptive Components

export const BlogMeta = ({date, author, tags}) => {
  const formatList = items => {
    if (!Array.isArray(items)) return items;
    if (items.length === 1) return items[0];
    if (items.length === 2) return `${items[0]} & ${items[1]}`;
    return `${items.slice(0, -1).join(", ")}, & ${items[items.length - 1]}`;
  };
  return <div className="flex flex-wrap items-center gap-2 text-sm text-gray-500 dark:text-gray-400">
      <span>{date}</span>
      <span>|</span>
      <span>{formatList(author)}</span>
      {tags && tags.length > 0 && <>
          <span>|</span>
          <div className="flex flex-wrap gap-1.5">
            {tags.map(tag => <span key={tag} className="px-2 py-1 rounded bg-gray-100 dark:bg-neutral-800 text-xs">
                {tag}
              </span>)}
          </div>
        </>}
    </div>;
};

<BlogMeta date="February 3, 2026" author="Adam Lantz" tags={["Engineering", "Design", "Web", "Mobile"]} />

We are introducing a new concept in Anvil2 that improves mobile experiences: **Adaptive Components**.

<div style={{ position: "relative", paddingBottom: "56.25%", height: 0 }}>
  <iframe src="https://www.loom.com/embed/ec96514c931547ab8077c5cecdc253d4" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }} />
</div>

## Automatic adaptation

Historically, building for the mobile web meant making a difficult choice: build a single "one-size-fits-all" component that feels mediocre on every device, or build separate desktop and mobile versions that increase maintenance burden.

Neither option is ideal. One leads to poor usability—like popovers being covered by software keyboards—and the other leads to inconsistent implementation across product teams.

**Adaptive components solve this problem.** Instead of forcing you to choose, adaptive components automatically detect the device context and transform their behavior to match. They determine the optimal experience automatically.

### See it in action: SelectField and MultiSelectField

The new [SelectField](/docs/web/components/select-field/code) and [MultiSelectField](/docs/web/components/multi-select-field/code) components (currently in beta) are our first adaptive components.

* **On Desktop:** They render a familiar popover dropdown, optimized for mouse and keyboard interaction.
* **On Mobile:** They instantly transform into a full-screen dialog. This ensures the menu is never obscured by the software keyboard, providing larger touch targets and a dedicated search input.

A key benefit is that you use the exact same component code. `SelectField` and `MultiSelectField` handle the complexity of switching views internally.

### Powered by `useAdaptiveView`

To make this logic reusable, we've shipped the [useAdaptiveView](/docs/web/utilities/hooks/useAdaptiveView) hook. This utility encapsulates our logic for determining the optimal view, combining screen size with pointer precision to distinguish between a small browser window on a desktop and a true mobile device.

By using `useAdaptiveView`, your custom components can share the same behavior as Anvil2's core library, ensuring a consistent experience across the entire platform.

### We want your feedback

We're just getting started with adaptiveness, and we want your input:

1. **Try the hook:** implementing `useAdaptiveView` in your own components? Let us know how it goes.
2. **Suggest components:** What other patterns (DatePickers? Menus? Filters?) would benefit from an adaptive mobile view?

Drop us a line in [#ask-designsystem](https://servicetitan.enterprise.slack.com/archives/CBSRGHTRS). We look forward to your feedback.