import { useState } from 'react'
import Content from '../../Content'
import Br from '../../Br'
import Span from '../../typography/Span'
import ArrayInput from '../ArrayInput'
import { useValue } from 'startupjs'

# ArrayInput

ArrayInput lets you build dynamic forms using its declarative api.

ArrayInput accepts an input metadata object with and a required `input` key to specify what type of input to display in the `items` property .

Possible types are: [array](/docs/forms/Array), [сheckbox](/docs/forms/Checkbox), [date](/docs/forms/DateTimePicker), [datetime](/docs/forms/DateTimePicker), [multiselect](/docs/forms/Multiselect), [number](/docs/forms/NumberInput), [object](/docs/forms/ObjectInput), [password](/docs/forms/PasswordInput), [radio](/docs/forms/Radio), [select](/docs/forms/Select), [time](/docs/forms/DateTimePicker), [text](/docs/forms/TextInput).

```jsx
import { ArrayInput } from '@startupjs/ui'
```

## Simple example

```jsx example
const [, $value] = useValue(['Green', 'Blue'])
return (
  <ArrayInput
    $value={$value}
    items={{ type: 'text' }}
  />
)
```