ArrayField
Form field component to handle array type values.
Props#
ArrayField#
| Prop | Type | Default | Description |
|---|---|---|---|
namerequired | TName | The field name | |
| children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | ((props: ArrayField[]) => ReactNode) | ||
| defaultValue | Record<string, any> | Default value for new values in the array | |
| direction | "row" | "column" | Whether the label is positioned vertically or horizontally | |
| help | string | Field help text | |
| hideLabel | boolean | Hide the field label | |
| isDisabled | boolean | false | If true, the form control will be disabled. This has 2 side effects:
- The FormLabel will have `data-disabled` attribute
- The form element (e.g, Input) will be disabled |
| isInvalid | boolean | false | If true, the form control will be invalid. This has 2 side effects:
- The FormLabel and FormErrorIcon will have `data-invalid` set to true
- The form element (e.g, Input) will have `aria-invalid` set to true |
| isReadOnly | boolean | false | If true, the form control will be readonly |
| isRequired | boolean | false | If true, the form control will be required. This has 2 side effects:
- The FormLabel will show a required indicator
- The form element (e.g, Input) will have `aria-required` set to true |
| keyName | string | id | Default key name for rows, change this if your data uses a different 'id' field |
| label | string | The field label | |
| max | number | ||
| min | number | ||
| placeholder | string | The input placeholder | |
| rules | Omit<
RegisterOptions<TFieldValues, TName>,
"disabled" | "setValueAs" | "valueAsDate" | "valueAsNumber"
> | React hook form rules | |
| type | string | Build-in types: text, number, password, textarea, select, native-select, checkbox, radio, switch, pin Will default to a text field if there is no matching type. |
ArrayFieldContainer#
| Prop | Type | Default | Description |
|---|---|---|---|
namerequired | string | The field name | |
| children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | ||
| defaultValue | Record<string, any> | Default value for new values in the array | |
| direction | "row" | "column" | Whether the label is positioned vertically or horizontally | |
| help | string | Field help text | |
| hideLabel | boolean | Hide the field label | |
| isDisabled | boolean | false | If true, the form control will be disabled. This has 2 side effects:
- The FormLabel will have `data-disabled` attribute
- The form element (e.g, Input) will be disabled |
| isInvalid | boolean | false | If true, the form control will be invalid. This has 2 side effects:
- The FormLabel and FormErrorIcon will have `data-invalid` set to true
- The form element (e.g, Input) will have `aria-invalid` set to true |
| isReadOnly | boolean | false | If true, the form control will be readonly |
| isRequired | boolean | false | If true, the form control will be required. This has 2 side effects:
- The FormLabel will show a required indicator
- The form element (e.g, Input) will have `aria-required` set to true |
| keyName | string | id | Default key name for rows, change this if your data uses a different 'id' field |
| label | string | The field label | |
| max | number | ||
| min | number | ||
| placeholder | string | The input placeholder | |
| rules | Omit<
RegisterOptions<FieldValues, string>,
"disabled" | "setValueAs" | "valueAsDate" | "valueAsNumber"
> | React hook form rules | |
| type | string | Build-in types: text, number, password, textarea, select, native-select, checkbox, radio, switch, pin Will default to a text field if there is no matching type. |
ArrayFieldRows#
| Prop | Type | Default | Description |
|---|---|---|---|
childrenrequired | (
fields: ArrayField[],
) => ReactElement<any, string | JSXElementConstructor<any>> | null |
ArrayFieldRowFields#
| Prop | Type | Default | Description |
|---|---|---|---|
| autoColumns | ResponsiveValue<GridAutoColumns<0 | (string & {})>> | Shorthand prop for gridAutoColumns | |
| autoFlow | ResponsiveValue<GridAutoFlow> | Shorthand prop for gridAutoFlow | |
| autoRows | ResponsiveValue<GridAutoRows<0 | (string & {})>> | Shorthand prop for gridAutoRows | |
| children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | The fields | |
| column | ResponsiveValue<GridColumn> | Shorthand prop for gridColumn | |
| columnGap | ResponsiveValue<number | "px" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | ... 53 more ... | "-3.5"> | Shorthand prop for gridColumnGap | |
| columns | ResponsiveValue<number> | Amount of field columns | |
| gap | ResponsiveValue<number | "px" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | ... 53 more ... | "-3.5"> | Shorthand prop for gridGap | |
| minChildWidth | ResponsiveValue<number | "px" | "max" | "min" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "auto" | "max-content" | "min-content" | "sm" | ... 61 more ... | "-webkit-min-content"> | The width at which child elements will break into columns. Pass a number for pixel values or a string for any other valid CSS length. | |
| row | ResponsiveValue<GridRow> | Shorthand prop for gridRow | |
| rowGap | ResponsiveValue<number | "px" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | ... 53 more ... | "-3.5"> | Shorthand prop for gridRowGap | |
| spacing | ResponsiveValue<string | number> | Spacing between fields | |
| spacingX | ResponsiveValue<number | "px" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | ... 53 more ... | "-3.5"> | The column gap between the grid items | |
| spacingY | ResponsiveValue<number | "px" | (string & {}) | "-moz-initial" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | "1" | "-1" | "2" | "-2" | "3" | "-3" | "4" | "-4" | "5" | "-5" | "6" | ... 53 more ... | "-3.5"> | The row gap between the grid items | |
| templateAreas | ResponsiveValue<GridTemplateAreas> | Shorthand prop for gridTemplateAreas | |
| templateColumns | ResponsiveValue<GridTemplateColumns<0 | (string & {})>> | Shorthand prop for gridTemplateColumns | |
| templateRows | ResponsiveValue<GridTemplateRows<0 | (string & {})>> | Shorthand prop for gridTemplateRows |
Was this helpful?