[eliyahu-kriel]

What

A new presentation="inline" for every field (DatePickerField, TimePickerField, DateTimePickerField, DurationPickerField, MonthPickerField, ColorPickerField, WheelPickerField, EmojiPickerField, PickerField), SelectPicker, and PhoneField's country list.

Tapping the field expands the picker in place under it, pushing the content below down, like the iOS Settings and Clock apps. A second tap folds it back up.

<DurationPickerField label="Snooze" value={snooze} onConfirm={setSnooze} presentation="inline" />

How it behaves

• Animation: the panel measures its content and animates its height from 0 to full on open, then back on close, with a fade. It runs on the JS driver because the native driver can't animate height, so it works the same on iOS, Android and web (useInlineExpand, InlinePanel).
• No Cancel / Done: each change fires onConfirm (or onSelect) right away. A date range commits once both ends are picked, and confirmOnSelect keeps its own path.
• Select: an inline list is at most 320 px tall and scrolls past that.
• Custom triggers: with renderTrigger, open() toggles an inline picker.

API change

useDraft's optional arguments move to an object: useDraft(value, visible, { resetKey, commit }). commit receives each change inside an inline field, which lets custom PickerSheets work inline. The old third argument, a positional resetKey, was never documented, but anyone passing it will break.

Docs

• Fields page: a new inline row and a live example.
• Other pages: the select, phone, sheets and core concepts pages, the API reference, the AI cheat sheet and the README now list inline.
• Playgrounds: the catalog playground and the live examples' props panel offer inline.
• Home and SEO: the home page card, the select page description and the keywords mention it.

Tests

pnpm lint && pnpm typecheck && pnpm test pass (644 tests). New tests cover:

• useInlineExpand: mount, height and unmount.
• useDraft: the live commit.
• usePickerField: the toggle.
• shouldCollapseOnPress.
• An end-to-end inline flow in MonthPickerField.

I haven't checked it by hand on a device yet.

🤖 Generated with Claude Code