radio options

apps/web/app/routes/examples.tsx

@@ -64,6 +64,9 @@ export default function Component() {
           <SidebarLayout.NavLink to={'/examples/forms/labels-and-options'}>
             Labels, options, etc
           </SidebarLayout.NavLink>
+          <SidebarLayout.NavLink to={'/examples/forms/radio-buttons'}>
+            Radio buttons
+          </SidebarLayout.NavLink>
           <SidebarLayout.NavLink to={'/examples/forms/hidden-field'}>
             Hidden field
           </SidebarLayout.NavLink>

apps/web/app/routes/examples/forms/form-with-children.tsx

@@ -39,6 +39,7 @@ export default () => (
             { name: 'Friend', value: 'fromAFriend' },
             { name: 'Search', value: 'google' },
           ]}
+          radio
         />
         <Field name="message" multiline placeholder="Your message" />
         <Errors />
@@ -81,6 +82,7 @@ export default function Component() {
                 { name: 'Friend', value: 'fromAFriend' },
                 { name: 'Search', value: 'google' },
               ]}
+              radio
             />
             <Field name="message" multiline placeholder="Your message" />
             <Errors />

apps/web/app/routes/examples/forms/radio-buttons.tsx

@@ -0,0 +1,49 @@
+import hljs from 'highlight.js/lib/common'
+import type {
+  ActionFunction,
+  LoaderFunction,
+  MetaFunction,
+} from '@remix-run/node'
+import { formAction } from '~/formAction'
+import { z } from 'zod'
+import Form from '~/ui/form'
+import { metaTags } from '~/helpers'
+import { makeDomainFunction } from 'domain-functions'
+import Example from '~/ui/example'
+
+const title = 'Radio buttons'
+const description =
+  'In this example, we render enum options in a radio button group.'
+
+export const meta: MetaFunction = () => metaTags({ title, description })
+
+const code = `const schema = z.object({
+  name: z.string().min(1),
+  role: z.enum(['Designer', 'Dev']),
+})
+
+export default () => (
+  <Form schema={schema} radio={['role']} />
+)`
+
+const schema = z.object({
+  name: z.string().min(1),
+  role: z.enum(['Designer', 'Dev']),
+})
+
+export const loader: LoaderFunction = () => ({
+  code: hljs.highlight(code, { language: 'ts' }).value,
+})
+
+const mutation = makeDomainFunction(schema)(async (values) => values)
+
+export const action: ActionFunction = async ({ request }) =>
+  formAction({ request, schema, mutation })
+
+export default function Component() {
+  return (
+    <Example title={title} description={description}>
+      <Form schema={schema} radio={['role']} />
+    </Example>
+  )
+}

apps/web/app/ui/form.tsx

@@ -8,7 +8,11 @@ import Label from './label'
 import Select from './select'
 import SubmitButton from './submit-button'
 import Checkbox from './checkbox'
+import Radio from './radio'
+
 import CheckboxWrapper from './checkbox-wrapper'
+import RadioWrapper from './radio-wrapper'
+
 import TextArea from './text-area'
 import {
   Form as RemixForm,
@@ -36,6 +40,8 @@ export default function Form<Schema extends FormSchema>(
       multilineComponent={TextArea}
       selectComponent={Select}
       checkboxComponent={Checkbox}
+      radioComponent={Radio}
+      radioGroupComponent={RadioWrapper}
       checkboxWrapperComponent={CheckboxWrapper}
       buttonComponent={SubmitButton}
       globalErrorsComponent={Errors}

apps/web/app/ui/radio-wrapper.tsx

@@ -0,0 +1,3 @@
+export default function RadioWrapper(props: JSX.IntrinsicElements['fieldset']) {
+  return <fieldset className="flex items-center space-x-2" {...props} />
+}

apps/web/app/ui/radio.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react'
+import { cx } from '~/helpers'
+
+const Radio = React.forwardRef<
+  HTMLInputElement,
+  JSX.IntrinsicElements['input']
+>(({ type = 'radio', className, ...props }, ref) => (
+  <input
+    ref={ref}
+    type={type}
+    className={cx(
+      'h-4 w-4 rounded',
+      className,
+      !className && 'border-gray-300 text-pink-600 focus:ring-pink-500',
+    )}
+    {...props}
+  />
+))
+
+export default Radio

apps/web/tests/examples/forms/form-with-children.spec.ts

@@ -20,13 +20,12 @@ test('With JS enabled', async ({ example }) => {
   await expect(page.locator('form em:visible')).toHaveText(
     "You'll hear from us at this address 👆🏽",
   )
+  await example.expectRadioToHaveOptions('howYouFoundOutAboutUs', [
+    { name: 'Friend', value: 'fromAFriend' },
+    { name: 'Search', value: 'google' },
+  ])
 
-  await example.expectSelect(howYouFoundOutAboutUs, { value: '' })
-  await howYouFoundOutAboutUs.input.selectOption({ value: 'fromAFriend' })
-
-  const options = howYouFoundOutAboutUs.input.locator('option')
-  await expect(options.first()).toHaveText('Friend')
-  await expect(options.last()).toHaveText('Search')
+  await howYouFoundOutAboutUs.input.first().click()
 
   await example.expectField(message, {
     multiline: true,
@@ -65,10 +64,9 @@ test('With JS enabled', async ({ example }) => {
 
   // Make form be valid
   await email.input.fill('john@doe.com')
-  await howYouFoundOutAboutUs.input.selectOption('google')
+  await howYouFoundOutAboutUs.input.last().click()
   await message.input.fill('My message')
   await example.expectValid(email)
-  await example.expectValid(howYouFoundOutAboutUs)
 
   // Submit form
   button.click()
@@ -126,7 +124,7 @@ testWithoutJS('With JS disabled', async ({ example }) => {
 
   // Make form be valid and test selecting an option
   await email.input.fill('john@doe.com')
-  await howYouFoundOutAboutUs.input.selectOption('google')
+  await howYouFoundOutAboutUs.input.last().click()
 
   // Submit form
   await button.click()

apps/web/tests/examples/forms/radio-buttons.spec.ts

@@ -0,0 +1,83 @@
+import { test, testWithoutJS, expect } from 'tests/setup/tests'
+
+const route = '/examples/forms/radio-buttons'
+
+test('With JS enabled', async ({ example }) => {
+  const { button, page } = example
+  const name = example.field('name')
+  const radio = example.field('role')
+
+  await page.goto(route)
+
+  // Render
+  await example.expectField(name)
+  await example.expectRadioToHaveOptions('role', [
+    { name: 'Dev', value: 'Dev' },
+    { name: 'Designer', value: 'Designer' },
+  ])
+  await expect(button).toBeEnabled()
+
+  // Client-side validation
+  await button.click()
+
+  // Show field errors and focus on the first field
+
+  await example.expectError(name, 'String must contain at least 1 character(s)')
+  await example.expectErrorMessage(
+    'role',
+    "Invalid enum value. Expected 'Designer' | 'Dev', received ''",
+  )
+
+  await expect(name.input).toBeFocused()
+
+  await name.input.type('John Corn')
+  await radio.input.first().click()
+
+  // Submit form
+  await button.click()
+
+  await example.expectData({
+    name: 'John Corn',
+    role: 'Designer',
+  })
+})
+
+testWithoutJS('With JS disabled', async ({ example }) => {
+  const { button, page } = example
+  const name = example.field('name')
+  const radio = example.field('role')
+
+  await page.goto(route)
+
+  // Render
+  await example.expectField(name)
+  await example.expectRadioToHaveOptions('role', [
+    { name: 'Dev', value: 'Dev' },
+    { name: 'Designer', value: 'Designer' },
+  ])
+  await expect(button).toBeEnabled()
+
+  // Client-side validation
+  await button.click()
+
+  // Show field errors and focus on the first field
+
+  await example.expectError(name, 'String must contain at least 1 character(s)')
+  await example.expectErrorMessage(
+    'role',
+    "Invalid enum value. Expected 'Designer' | 'Dev', received ''",
+  )
+
+  await expect(name.input).toBeFocused()
+
+  await name.input.type('John Corn')
+  await radio.input.first().click()
+
+  // Submit form
+  await button.click()
+
+  await example.expectData({
+    name: 'John Corn',
+    role: 'Designer',
+  })
+})

apps/web/tests/setup/example.ts

@@ -16,6 +16,7 @@ type FieldOptions = {
   required?: boolean
   invalid?: boolean
   multiline?: boolean
+  radio?: boolean
   options?: { name: string; value: string }[]
 }
 
@@ -79,9 +80,20 @@ class Example {
       `label-for-${field.name}`,
     )
 
-    required
-      ? await expect(field.input).toHaveAttribute('aria-required', 'true')
-      : await expect(field.input).not.toHaveAttribute('aria-required', 'true')
+    await expect(field.input).toHaveAttribute('aria-required', String(required))
+  }
+
+  async expectRadioToHaveOptions(
+    radioName: string,
+    options: { name: string; value: string }[],
+  ) {
+    Promise.all(
+      options.map(({ name, value }) => {
+        expect(
+          this.page.locator(`[name="${radioName}"][value="${value}"]:visible`),
+        ).toBeVisible()
+      }),
+    )
   }
 
   async expectSelect(field: Field, options: FieldOptions = {}) {
@@ -108,8 +120,11 @@ class Example {
   async expectError(field: Field, message: string) {
     await this.expectInvalid(field)
 
+    await this.expectErrorMessage(field.name, message)
+  }
+  async expectErrorMessage(fieldName: string, message: string) {
     await expect(
-      this.page.locator(`#errors-for-${field.name}:visible`),
+      this.page.locator(`#errors-for-${fieldName}:visible`),
     ).toHaveText(message)
   }