mirror of
https://github.com/grafana/grafana.git
synced 2025-07-30 21:53:00 +08:00
41 lines
1.3 KiB
Plaintext
41 lines
1.3 KiB
Plaintext
import { Meta, Props } from '@storybook/addon-docs/blocks';
|
|
import { FieldArray } from './FieldArray';
|
|
|
|
<Meta title="MDX|FieldArray" component={FieldArray} />
|
|
|
|
# FieldArray
|
|
|
|
`FieldArray` provides a way to render a list of dynamic inputs. It exposes the functionality of `useFieldArray` in [react-hook-form](https://react-hook-form.com/advanced-usage/#FieldArrays). `FieldArray` must be wrapped at some level by a `<Form>` element.
|
|
|
|
### Usage
|
|
|
|
```jsx
|
|
import { Form, FieldArray } from '@grafana/ui';
|
|
|
|
<Form>
|
|
({control, register}) => (
|
|
<FieldArray control={control} name="People">
|
|
{({ fields, append }) => (
|
|
<div>
|
|
{fields.map((field, index) => (
|
|
<div key={field.id}>
|
|
<Input key={index} ref={register()} name=`people[${index}].firstName` value={field.firstName} />
|
|
<Input ref={register()} name=`people[${index}].lastName` 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
|
|
|
|
<Props of={FieldArray} />
|