Demo: Mimicking rotating-dial iOS picker UI

[hxlnt]

On iOS, some select menus have a rotating-dial feel where the center item is always selected. One example is scrolling through months and days in the date picker.

I wanted to build something similar with a huh Select, where the selection is in a fixed central position and scrolling causes the choices to rotate. This differs from the huh Select item, where the selection moves in the direction scrolled. I also wanted the options to constantly rotate from beginning to end. So... I did something kind of unconventional, but I think it worked out well as a proof of concept!

Screen.Recording.2025-04-02.at.11.02.39.AM.mov

First, there's an inline huh Select where every option displays a blank line but has a unique value. This is rendered as the blank line above my picker menu. Right below that is a huh Note. The first two lines of the picker menu are actually the note title (updated via TitleFunc), while the second two lines are the note description (updated via DescriptionFunc). This allows me to style them differently without breaking the components.

	options := []huh.Option[string]{
		huh.NewOption(" ", "collections"),
		huh.NewOption(" ", "layouts"),
		huh.NewOption(" ", "logs"),
		huh.NewOption(" ", "suggestions"),
	}
	huh.NewSelect[string]().
		Options(options...).
		Height(1).
		Inline(true).
		Value(&category),
	huh.NewNote().
		Height(4).
		TitleFunc(func() string {
		        return UpdateSelectionTop(category)
		}, &category).
		DescriptionFunc(func() string {
			return UpdateSelectionBottom(category)
		}, &category),

There's probably more you could do with the foreground and background styling to making it look like the further away entries are rotating out into the distance.

Anyway, just wanted to share in case it helps spark any ideas. I think it's cool that the huh components are flexible enough to let you do modifications like this through unconventional means. :)

[meowgorithm]

This is so awesome, @hxlnt. Thanks for sharing it!