getFieldsetProps

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

1const props = getFieldsetProps(meta, options);

#例

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

#オプション

`ariaAttributes`

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

`ariaInvalid`

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

`ariaDescribedBy`

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

#Tips

ヘルパーは任意です

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

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

自分のヘルパーを作る

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