Questions around how the Select machine works and why

[lvl-mattwells]

Hello! I'm experimenting with building out some components using Zag and have made it to form fields, namely the Select field. One of the components from Chakra-UI that I used often was the FormControl component as it made it really easy to provide an ID, name, and various states that could be consumed by the label, field, description, and error text. After trying my hand at my own FormControl with Zag's Select, there were two things I encountered that felt awkward.

1. Label props are part of the Select machine. Which means if I want to build a FormLabel and keep it separate from the Select, I have to do some sort of context-state-callback in order to share the labelProps with the FormLabel which doesn't feel great. I understand why this is being done within the Select since you have to link the label to the control for accessibility stuff, but even if I wanted to just ignore Select's label, make my own FormLabel and link with the field myself, that's awkward too because of the way IDs are set. Which leads me to number 2.
2. Zag modifies the ID used for everything to include the field type. Is there a specific motivation for doing this? It seems much more difficult to compose a FormControl/FormLabel group when I now have to know which field is being used as a child so that I can compose the ID correctly. I understand the suffix part of the ID such as mySelect:label, but why select:mySelect:label? I know this could also probably be solved by using context-state-callback just like number 1, but IMO, that's just not ideal. Having to sacrifice extra re-renders for every field I want to put in a form does not spark joy.

zag/packages/machines/select/src/select.dom.ts

Lines 5 to 12 in 571bb18

	getContentId: (ctx: Ctx) => ctx.ids?.content ?? `select:${ctx.id}:content`,
	getTriggerId: (ctx: Ctx) => ctx.ids?.trigger ?? `select:${ctx.id}:trigger`,
	getLabelId: (ctx: Ctx) => ctx.ids?.label ?? `select:${ctx.id}:label`,
	getOptionId: (ctx: Ctx, id: string | number) => ctx.ids?.option?.(id) ?? `select:${ctx.id}:option:${id}`,
	getHiddenSelectId: (ctx: Ctx) => `select:${ctx.id}:select`,
	getPositionerId: (ctx: Ctx) => `select:${ctx.id}:positioner`,
	getOptionGroupId: (ctx: Ctx, id: string | number) => `select:${ctx.id}:optgroup:${id}`,
	getOptionGroupLabelId: (ctx: Ctx, id: string | number) => `select:${ctx.id}:optgroup-label:${id}`,

This is clearly just my perspective and I share/question these things only as a means to better understand Zag and possibly help improve it in some way. If you have other means of solving the problems I described here I'm very much open to it!

Thanks!!

[segunadebayo]

Hi @lvl-mattwells,

Thanks for sharing this thoughtful feedback.

You no longer need FormControl and FormLabel when working with Zag.js components. All the benefits FormControl provides are integrated directly within the machine.

Styling is another topic we can address. How do I ensure the styling stays consistent with the existing FormLabels?

You can leverage the context of the existing form styles provided by Chakra.

Here's an example:

function Select({ label, options }) {
  const styles = useFormControlStyles()
  const [state, send] = useMachine(select.machine())
  const api = select.connect(state, send, normalizeProps)
  
  return (
    <>
      {label && (
        <Stack>
          <Box as="label" __css={styles} {...api.labelProps}>
            {label}
          </Box>
          <button {...api.triggerProps}>
            <span>{api.selectedOption?.label ?? 'Select option'}</span>
            <CaretIcon />
          </button>
        </Stack>
      )}
      <Portal>
        <div {...api.positionerProps}>
          <ul {...api.contentProps}>
            {options.map(({ label, value }) => (
              <li key={value} {...api.getOptionProps({ label, value })}>
                <span>{label}</span>
                {value === api.selectedOption?.value && '✓'}
              </li>
            ))}
          </ul>
        </div>
      </Portal>
    </>
  )
}

[segunadebayo]

Why does Zag.js add ids to every element part?

We do this for two reasons:

• Accessibility: As you might know, we need to assign ids to the correct elements to get the aria-* and htlmFor attributes working correctly.

• Finding DOM Elements: Due to the fact that Zag.js is framework agnostic, the idea of ref can't be used here; we rely on the good ole document.getElementById to locate elements in the DOM. We also ensure it works in custom window environments and ShadowDOM.

Okay. I get that, but how do I override the ids?

Every machine has a ids property you can pass to the context to modify the id of any part to match what you want.

You can use this to compose the FormControl and FormLabel elements if needed.

Here's how to update the ids:

const [tooltipState, tooltipSend] = useMachine(
    select.machine({
      ids: { label: "form-label" },
    }),
  )