getSelectProps

セレクト要素をアクセシブルにするために必要なすべてのプロパティを返すヘルパーです。

1const props = getSelectProps(meta, options);

#例

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

#オプション

`value`

このヘルパーは、例えばコントロールされた入力のように、これが false に設定されていない限り、 defaultValue を返します。

`ariaAttributes`

結果のプロパティに aria-invalid と aria-describedby を含めるかどうかを決定します。デフォルトは true です。

`ariaInvalid`

結果のプロパティに aria-invalid と aria-describedby を含めるかどうかを決定します。デフォルトは true です。

`ariaDescribedBy`

aria-describedby 属性に追加の id を付加します。フィールドメタデータから meta.descriptionId を渡すことができます。

#Tips

ヘルパーは任意です。

このヘルパーは、定型文を減らし、読みやすくするための便利な機能です。セレクト要素のプロパティを設定するために、いつでもフィールドメタデータを直接使用することができます。

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}

自分のヘルパーを作る

このヘルパーは、ネイティブのセレクト要素用に設計されています。カスタムコンポーネントを使用する必要がある場合は、自分自身のヘルパーを作成することができます。