State of FormControl

[Jonas-C]

Hi! According to your roadmap, a Form/FormControl component has been planned for a while now. I saw that the chakra-ui migration to ark is still using its own implementation of FormControl, and was wondering about the progress of a potential Ark FormControl. Is it in the works? Would it be released with the next major version?

Most, if not all of your components already support automatically grouping labels and their respective components. Furthermore, it seems like several of your components support required, invalid and readonly. Are there any plans to export ErrorMessage and HelperTextcomponents for the form components?

[segunadebayo]

@Jonas-C Yes, we have plans to add support for those Form-related components. Most of the code in Chakra will end up in Ark.

Side note: It's really exciting to see what you're building in NDLA frontend packages repo 👌🏼

[Jonas-C]

Thanks, and thanks! I'm excited to use Ark!

Do you have any indication as to what it'll look like? Right now we're currently using something that looks a whole lot like chakras FormControl. I'm considering creating small wrappers around the form-related components in Ark now where I'll consume the FormControl context and pass it down to the ark root components. Does that seem like an approach that could easily be switched over to the ark FormControl in the future?

[cschroeter]

@Jonas-C

Here is what we have on the whiteboard. Happy to hear your feedback.

Interface

interface FieldProps {
  id?: string
  invalid?: boolean;
  disabled?: boolean;
  readOnly?: boolean;
}

Using Ark Components

<Field.Root>
    <Select.Root>
        <Select.Label>Label</Select.Label>
    </Select.Root>
    <Field.HelperText>Some info</Field.HelperText>
    <Field.ErrorText>Some info</Field.ErrorText>
</Field.Root>

Custom Components

<Field.Root>
    <Field.Label>Email address</Field.Label>
    // <Field.Context>
    //     {api=> <input type="email" {...api.getControlProps()} />}
    // </Field.Context>
    <Field.Control asChild>
        <input type="email" />
    </Field.Control>
    <Field.HelperText>Some info</Field.HelperText>
    <Field.ErrorText>Some info</Field.ErrorText>
</Field.Root>

[Jonas-C]

This looks great, thank you so much! I'll keep making shallow wrappers until this lands 😄