Using Radix Themes (or Primitives) with Conform

[penx]

I've been using Conform recently, I initially noticed it has been used by @kentcdodds in Epic Stack, which already has a lot of great choices for a tech stack including Radix, so gave it a go and have had great results so far.

I was wondering of many people are combining Radix Themes or Primitives with Conform and any techniques they've found to work well?

I noticed this on the Conform helper docs:

The helper is designed for the native input elements. If you need to use a custom component, you can always make your own helpers.

So have been starting to create these for Radix Themes.

Perhaps this will be useful for others, perhaps I'll use a different approach in future, but putting the in-progress code here now in case it's useful or anyone has feedback. I can publish this to npm if people want it.

See the code

import type { FieldMetadata } from "@conform-to/react";
import type * as RadixThemes from "@radix-ui/themes";

// getAriaAttributes comes from Conform directly but is not currently exported. It has logic for adding aria-describedby and aria-invalid
// https://github.com/edmundhung/conform/blob/f741fd25f75fc1a41c7cb07e84afeabacca12777/packages/conform-react/helpers.ts#L139
import { getAriaAttributes, type FormControlOptions } from "./getAriaAttributes";

export function getSliderProps<Schema extends number | undefined>(
  metadata: FieldMetadata<Schema, any, any>,
  options?: FormControlOptions,
): React.ComponentProps<typeof RadixThemes.Slider> {
  return {
    id: metadata.id,
    name: metadata.name,
    ...getAriaAttributes(metadata, options),
  } satisfies React.ComponentProps<typeof RadixThemes.Slider>;
}

export function getTextAreaProps<Schema extends string | undefined>(
  metadata: FieldMetadata<Schema, any, any>,
  options?: FormControlOptions,
): React.ComponentProps<typeof RadixThemes.TextArea> {
  return {
    required: metadata.required || undefined,
    id: metadata.id,
    name: metadata.name,
    form: metadata.formId,
    ...getAriaAttributes(metadata, options),
  } satisfies React.ComponentProps<typeof RadixThemes.TextArea>;
}

export function getTextFieldRootProps<Schema extends string | number | undefined>(
  metadata: FieldMetadata<Schema, any, any>,
  options?: FormControlOptions,
): React.ComponentProps<typeof RadixThemes.TextField.Root> {
  return {
    required: metadata.required || undefined,
    id: metadata.id,
    name: metadata.name,
    form: metadata.formId,
    ...getAriaAttributes(metadata, options),
  } satisfies React.ComponentProps<typeof RadixThemes.TextField.Root>;
}

export function getSelectRootProps<Schema extends string | undefined>(
  metadata: FieldMetadata<Schema, any, any>,
) {
  return {
    required: metadata.required || undefined,
    name: metadata.name,
  } satisfies React.ComponentProps<typeof RadixThemes.Select.Root>;
}

export function getSelectTriggerProps<Schema extends string | undefined>(
  metadata: FieldMetadata<Schema, any, any>,
  options?: FormControlOptions,
): React.ComponentProps<typeof RadixThemes.Select.Trigger> {
  return {
    id: metadata.id,
    form: metadata.formId,
    ...getAriaAttributes(metadata, options),
  } satisfies React.ComponentProps<typeof RadixThemes.Select.Trigger>;
}

export function getSelectItemProps<
  Schema extends string | undefined,
  Value extends NonNullable<Schema>,
>(
  _metadata: FieldMetadata<Schema, any, any>,
  options: {
    value: Value;
  },
) {
  return {
    value: options.value,
  } satisfies React.ComponentProps<typeof RadixThemes.Select.Item>;
}

export function getRadioCardsRootProps<Schema extends string | undefined>(
  metadata: FieldMetadata<Schema, any, any>,
  options?: FormControlOptions,
) {
  return {
    required: metadata.required || undefined,
    id: metadata.id,
    name: metadata.name,
    ...getAriaAttributes(metadata, options),
  } satisfies React.ComponentProps<typeof RadixThemes.RadioCards.Root>;
}

export function getRadioCardsItemProps<
  Schema extends string | undefined,
  Value extends NonNullable<Schema>,
>(metadata: FieldMetadata<Schema, any, any>, options: { value: Value }) {
  return {
    value: options.value,
    form: metadata.formId,
  } satisfies React.ComponentProps<typeof RadixThemes.RadioCards.Item>;
}

export function getCheckboxCardsRootProps<Schema extends string[] | undefined>(
  metadata: FieldMetadata<Schema, any, any>,
  options?: FormControlOptions,
) {
  return {
    required: metadata.required || undefined,
    id: metadata.id,
    name: metadata.name,
    ...getAriaAttributes(metadata, options),
  } satisfies React.ComponentProps<typeof RadixThemes.CheckboxCards.Root>;
}

export function getCheckboxCardsItemProps<
  Schema extends string[] | undefined,
  Value extends NonNullable<Schema>[number],
>(options: { value: Value }) {
  return {
    value: options.value,
  } satisfies React.ComponentProps<typeof RadixThemes.CheckboxCards.Item>;
}

export function getCheckboxProps<Schema extends boolean | undefined>(
  metadata: FieldMetadata<Schema, any, any>,
  options?: FormControlOptions,
) {
  return {
    required: metadata.required || undefined,
    id: metadata.id,
    name: metadata.name,
    form: metadata.formId,
    ...getAriaAttributes(metadata, options),
  } satisfies React.ComponentProps<typeof RadixThemes.Checkbox>;
}

[tunttunen]

Hi there, I am interested in integrating Conform with Radix UI Themes also and wondering what is the most sensible/flexible way to do so exactly at the moment? Any news on your journey with this @penx ?

[penx]

We're still using the code listed in my post above, and updating it as we start to use more from Radix Themes.

I've updated my post above with the latest code. I recently removed the key prop as newer versions of React were complaining about key being spread, and I'm not sure it's needed.

I was thinking about creating a library on npm but I can't commit to maintaining it, so I'd suggest just copying what I have above in to your project locally. Happy for someone else to make a library using this code if they think they can commit to maintenance. Or perhaps it could become part of the the conform repo (as @confirm-to/radix-themes) if @edmundhung wants it.

[tunttunen]

Thanks for the quick reply. How do you exactly handle the various possible validation constraints such as textfield value max length and such that "just works" in the Epic Stack starter where there is the inputProps that are spread to an input element? Just noticing that e.g. the getTextFieldRootProps does not have than just a couple of mappings going on in your code:

    required: metadata.required || undefined,
    id: metadata.id,
    name: metadata.name,
    form: metadata.formId,
    ...getAriaAttributes(metadata, options),

What's your take on to this guide here?: https://conform.guide/integration/ui-libraries#enhancing-custom-inputs-with-useinputcontrol