Form with Select

Combining Form and Select to create an accessible custom select widget that works with the browser's built-in validation and native form submission.

Form Select Dropdowns Form controls Abstracted examples

Edit example

123456789101112131415161718192021222324252627282930313233343536373839
import "./style.css";
import {
  Form,
  FormField,
  FormInput,
  FormSelect,
  FormSubmit,
  useFormStore,
} from "./form.tsx";
import { SelectItem } from "./select.tsx";

export default function Example() {
  const form = useFormStore({ defaultValues: { name: "", fruit: "" } });
  const $ = form.names;

  form.useSubmit(() => {
    alert(JSON.stringify(form.getState().values));
  });

  return (
    <Form store={form}>
      <FormField name={$.name} label="Name">
        <FormInput name={$.name} required placeholder="John Doe" />
      </FormField>
      <FormField name={$.fruit} label="Favorite fruit">
        <FormSelect name={$.fruit} required>
          <SelectItem value="">Select an item</SelectItem>
          <SelectItem value="Apple" />
          <SelectItem value="Banana" />
          <SelectItem value="Orange" />
        </FormSelect>
      </FormField>
      <div className="buttons">
        <FormSubmit>Submit</FormSubmit>
      </div>
    </Form>
  );
}

import "./style.css";
import {
  Form,
  FormField,
  FormInput,
  FormSelect,
  FormSubmit,
  useFormStore,
} from "./form.tsx";
import { SelectItem } from "./select.tsx";

export default function Example() {
  const form = useFormStore({ defaultValues: { name: "", fruit: "" } });
  const $ = form.names;

  form.useSubmit(() => {
    alert(JSON.stringify(form.getState().values));
  });

  return (
    <Form store={form}>
      <FormField name={$.name} label="Name">
        <FormInput name={$.name} required placeholder="John Doe" />
      </FormField>
      <FormField name={$.fruit} label="Favorite fruit">
        <FormSelect name={$.fruit} required>
          <SelectItem value="">Select an item</SelectItem>
          <SelectItem value="Apple" />
          <SelectItem value="Banana" />
          <SelectItem value="Orange" />
        </FormSelect>
      </FormField>
      <div className="buttons">
        <FormSubmit>Submit</FormSubmit>
      </div>
    </Form>
  );
}

Components

FormSubmit information with accessible interactive controls in React. Take advantage of the browser's built-in validation with screen reader support. This component is based on the WAI-ARIA Form Role.

SelectSelect a value from a list of options presented in a dropdown menu, similar to the native HTML select element. This component is based on the WAI-ARIA Combobox Pattern.

View all components

Related examples

FormRadioUsing the FormRadioGroup and FormRadio components to create a Form with custom validation that requires a user to select an option from a list of radio buttons.

View all examples

Form with Select

Components

Related examples

Stay tuned