ObjectField

Form field component to handle object type values.

Props#

Prop	Type	Default	Description
name`required`	`TName`		The field name
children	`string \| number \| bigint \| boolean \| ReactElement<any, string \| JSXElementConstructor<any>> \| Iterable<ReactNode> \| ReactPortal \| Promise<...>`
columns	`ResponsiveValue<number>`
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`
label	`string`		The field label
placeholder	`string`		The input placeholder
rules	`Omit< RegisterOptions<FieldValues, string>, "disabled" \| "setValueAs" \| "valueAsDate" \| "valueAsNumber" >`		React hook form rules
spacing	`ResponsiveValue<string \| number>`
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.

Was this helpful?