import { Meta, ArgTypes } from '@storybook/blocks'; import { FieldArray } from './FieldArray';

FieldArray

FieldArray provides a way to render a list of dynamic inputs. It exposes the functionality of useFieldArray in react-hook-form. FieldArray must be wrapped at some level by a <Form> element.

Note: This component is deprecated and will be removed in the future versions of grafana/ui. Use the useFieldArray hook from react-hook-form instead.

Usage

jsx

import { Form, FieldArray } from '@grafana/ui';

<Form onSubmit={() => console.log('form submitted')}>
  ({control, register}) => (
    <FieldArray control={control} name="People">
      {({ fields, append }) => (
          <div>
              {fields.map((field, index) => (
                  <div key={field.id}>
                      <Input key={index} {...register(`people[${index}].firstName` as const)} value={field.firstName} />
                      <Input {...register(`people[${index}].lastName` as const)} value={field.lastName} />
                  </div>
              ))}
              <Button onClick={() => append({firstName: 'Roger', lastName: 'Waters'})}>Append</Button>
          </div>
      )}
    </FieldArray>
  )
</Form>;

FieldArray API

The FieldArray component exposes its API via render prop. Properties exposed are: fields, append, prepend, remove, swap, move, insert

Props