getFormProps

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

1const props = getFormProps(form, options);

#例

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

#オプション

`ariaAttributes`

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

`ariaInvalid`

aria 属性が meta.errors または meta.allErrors に基づくべきかを決定します。デフォルトは errors です。

`ariaDescribedBy`

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

#Tips

ヘルパーは任意です

ヘルパーは、定型文を減らし、読みやすくするための便利な関数にすぎません。フォーム要素のプロパティを設定するには、いつでもフォームのメタデータを直接使うことができます。

1// Before
2function Example() {
3  return (
4    <form
5      id={form.id}
6      onSubmit={form.onSubmit}
7      noValidate={form.noValidate}
8      aria-invalid={!form.valid || undefined}
9      aria-describedby={!form.valid ? form.errorId : undefined}
10    />
11  );
12}
13
14// After
15function Example() {
16  return <form {...getFormProps(form)} />;
17}

自分のヘルパーを作る

ヘルパーはネイティブのフォーム要素のために設計されています。カスタムコンポーネントを使う必要がある場合、いつでも独自のヘルパーを作ることができます。