Metadata

import Metadata from 'frui/fields/Metadata';

Copy

Props

The following props are accepted by Metadata.

Name	Type	Required	Notes
add	string	No	Add button text
className	string	No	Standard HTML class names applied to the add button
defaultValue	Object entries	No	Default value (uncontrolled)
error	string\|boolean	No	Any error message
min	string\|number	No	Used to set minimum number if type is number
max	string\|number	No	Used to set maximum number if type is number
name	string	No	Used for react server components.
placeholder	string\|string[]	No	Placeholders for input values.
onUpdate	Function	No	Event handler when value updates
step	string\|number	No	Used to set step number if type is number
style	CSS Object	No	Standard CSS object applied to the add button
type	string	No	Sets the type of value input
value	Object entries	No	Default value (controlled)

Basics

The following is a basic example of a Metadata field.

<Metadata 
  add="Add Reference" 
  placeholder={['Enter Key', 'Enter Value']} 
  value={Object.entries({ foo: 'Foo', bar: 'Bar' })} 
/>

Copy

You can set different value types using the type prop. Its value can be one of `type="text"`, `type="number"`, `type="date"`, `type="time"`, or `type="datetime"`.

<Metadata type="date" add="Add Date" />

Copy

For `type="number"`, you can also set the min, max, and step props.

<Metadata type="number" min="0" max="100000" step="0.01" add="Add Number" />

Copy

Events

The following example makes use of all the possible events for Metadata.

<Metadata add="Add Reference" onUpdate={value => alert(JSON.stringify(value))} />

Copy

On Update

The onUpdate event is triggered when the value has been updated. The following arguments are passed to the event handler:

Name	Type	Sample
value	Object Entries	`[['foo', 'Foo'], ['bar', 'Bar']]`

Errors

You can pass the error prop to highlight the Metadata field red.

<Metadata error value={Object.entries({ foo: 'Foo', bar: 'Bar' })} />

Copy

Custom Styles

You can add your own custom class to selects or use any of the respective frui-field-metadata-row, frui-field-metadata-remove, frui-field-metadata-name, frui-field-metadata-value, and frui-fieldset-add CSS classes.

Mask

Number