getSelectProps

A helper that returns all the props required to make an select element accessible.

1const props = getSelectProps(meta, options);

#Example

1import { useForm, getSelectProps } from '@conform-to/react';
2
3function Example() {
4  const [form, fields] = useForm();
5
6  return <select {...getSelectProps(fields.category)} />;
7}

#Options

`value`

The helper will return a defaultValue unless this is set to false, e.g. a controlled input.

`ariaAttributes`

Decide whether to include aria-invalid and aria-describedby in the result props. Default to true.

`ariaInvalid`

Decide whether the aria attributes should be based on meta.errors or meta.allErrors. Default to errors.

`ariaDescribedBy`

Append additional id to the aria-describedby attribute. You can pass meta.descriptionId from the field metadata.

#Tips

The helper is optional

The helper is just a convenience function to help reducing boilerplate and make it more readable. You can always use the field metadata directly to set the props of your select element.

1// Before
2function Example() {
3  return (
4    <form>
5      <select
6        key={fields.category.key}
7        id={fields.category.id}
8        name={fields.category.name}
9        form={fields.category.formId}
10        defaultValue={fields.category.initialValue}
11        aria-invalid={!fields.category.valid || undefined}
12        aria-describedby={
13          !fields.category.valid ? fields.category.errorId : undefined
14        }
15        required={fields.category.required}
16        multiple={fields.category.multiple}
17      />
18    </form>
19  );
20}
21
22// After
23function Example() {
24  return (
25    <form>
26      <select {...getSelectProps(fields.category)} />
27    </form>
28  );
29}

Make your own helper

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