Textlist

import Textlist from 'frui/fields/Textlist';

Copy

Props

The following props are accepted by Textlist.

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

Basics

The following is a basic example of a Textlist field.

<Textlist add="Add Value" placeholder="Enter Value" value={['foo', 'bar']} />

Copy

Events

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

<Textlist add="Add Value" 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	string[]	`['foo', 'bar']`

Errors

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

<Textlist error value={['foo', 'bar']} />

Copy

Custom Styles

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

Textarea

Time