[select] How to use Ark with conform.guide?

[lilouartz]

Relevant documentation:

• https://ark-ui.com/react/docs/components/select
• https://park-ui.com/react/docs/components/select
• https://conform.guide/api/react/getSelectProps

Copying @edmundhung

Been trying to figure out the past few hours with no luck.

Do I need to be using unstable_useControl ?

How do I register the input?

Ask/Park expects value to be array. Meanwhile, conform expects/provides string.

[cschroeter]

Can you not just wire this up with the hidden select?

[lilouartz]

I don't know if I am doing this correctly, but after a lot of experimentation, this is what I ended up with:

const HealthCard = () => {
  const data = useLoaderData<typeof loader>();

  const genderOptions: SelectOption[] = [
    { label: 'Female', value: 'female' },
    { label: 'Male', value: 'male' },
  ];

  const fetcher = useFetcher<typeof action>();

  const [form, fields] = useForm({
    defaultValue: {
      gender: data.healthCard.gender,
    },
    lastResult: fetcher.data?.submission,
    onValidate({ formData }) {
      return parseWithZod(formData, { schema: FormDataZodSchema });
    },
  });

  const genderInputControl = useControl(fields.gender);

  const submitting = fetcher.state === 'submitting';

  return (
    <FormProvider context={form.context}>
      <fetcher.Form
        method="post"
        {...getFormProps(form)}
      >
        <Form.Layout>
          <Form.Field input={fields.gender}>
            <input
              ref={genderInputControl.register}
              value={genderInputControl.value}
            />
            <Form.Item>
              <Form.Control>
                <Select.Root
                  defaultValue={
                    fields.gender.initialValue
                      ? [fields.gender.initialValue]
                      : ['male']
                  }
                  items={genderOptions}
                  name={fields.gender.name}
                  onValueChange={({ value }) => {
                    console.log('value[0]', value[0]);

                    genderInputControl.change(value[0] as 'male' | 'female');
                  }}
                  positioning={{ sameWidth: true }}
                >
                  <Select.Label>Gender</Select.Label>
                  <Select.Control>
                    <Select.Trigger>
                      <Select.ValueText placeholder="Select a gender" />
                      <ChevronsUpDownIcon />
                    </Select.Trigger>
                  </Select.Control>
                  <Select.Positioner>
                    <Select.Content>
                      <Select.ItemGroup>
                        <Select.ItemGroupLabel>Gender</Select.ItemGroupLabel>
                        {genderOptions.map((item) => (
                          <Select.Item
                            item={item}
                            key={item.value}
                          >
                            <Select.ItemText>{item.label}</Select.ItemText>
                            <Select.ItemIndicator>
                              <CheckIcon />
                            </Select.ItemIndicator>
                          </Select.Item>
                        ))}
                      </Select.ItemGroup>
                    </Select.Content>
                  </Select.Positioner>
                </Select.Root>
              </Form.Control>
            </Form.Item>
          </Form.Field>
          <div
            className={css({
              display: 'flex',
              gap: '8px',
            })}
          >
            <Button
              className={button()}
              disabled={submitting}
              type="submit"
            >
              Update Health Card
            </Button>
          </div>
        </Form.Layout>
      </fetcher.Form>
    </FormProvider>
  );
};

It seems to work, but seeing there is no documentation (that I can find) for use useControl, I am unsure.

[cschroeter]

I've not tried for myself but sth like

 <Select.HiddenSelect {...getSelectProps(fields.category)} />

Should work