getCollectionProps
チェックボックスまたはラジオボタンのグループをアクセシブルにするために必要なすべてのプロパティを返すヘルパーです。
1const collectionProps = getCollectionProps(meta, options);#例
1import { useForm, getCollectionProps } from '@conform-to/react';
2
3function Example() {
4 const [form, fields] = useForm();
5
6 return (
7 <>
8 {getCollectionProps(fields.color, {
9 type: 'radio',
10 options: ['red', 'green', 'blue'],
11 }).map((props) => (
12 <label key={props.id} htmlFor={props.id}>
13 <input {...props} />
14 <span>{props.value}</span>
15 </label>
16 ))}
17 </>
18 );
19}#オプション
type
コレクションのタイプです。 checkbox （チェックボックス）または radio （ラジオボタン）のいずれかになります。
options
コレクションのオプションです。各オプションは入力の値として扱われ、対応する key または id を導出するために使用されます。
value
このヘルパーは、例えばコントロールされた入力のように、これが false に設定されていない限り、 defaultValue を返します。
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 <form>
5 {['a', 'b', 'c'].map((value) => (
6 <label key={value} htmlFor={`${fields.category.id}-${value}`}>
7 <input
8 type="checkbox"
9 key={`${fields.category.key}-${value}`}
10 id={`${fields.category.id}-${value}`}
11 name={fields.category.name}
12 form={fields.category.formId}
13 value={value}
14 defaultChecked={fields.category.initialValue?.includes(value)}
15 aria-invalid={!fields.category.valid || undefined}
16 aria-describedby={
17 !fields.category.valid ? fields.category.errorId : undefined
18 }
19 />
20 <span>{value}</span>
21 </label>
22 ))}
23 x
24 </form>
25 );
26}
27
28// After
29function Example() {
30 return (
31 <form>
32 {getCollectionProps(fields.category, {
33 type: 'checkbox',
34 options: ['a', 'b', 'c'],
35 }).map((props) => (
36 <label key={props.id} htmlFor={props.id}>
37 <input {...props} />
38 <span>{props.value}</span>
39 </label>
40 ))}
41 </form>
42 );
43}自分のヘルパーを作る
このヘルパーは、ネイティブのチェックボックス要素用に設計されています。カスタムコンポーネントを使用する必要がある場合は、自分自身のヘルパーを作成することができます。