Taglist
import Taglist from 'frui/fields/Taglist'; Copy
Props
The following props are accepted by Taglist.
| Name | Type | Required | Notes |
|---|---|---|---|
| className | string | No | Standard HTML class names |
| color | string | No | Custom background color for tags |
| danger | boolean | No | Red background color for tags |
| info | boolean | No | Blue background color for tags |
| defaultValue | string[] | No | Default value (uncontrolled) |
| error | string|boolean | No | Any error message |
| muted | boolean | No | Gray background color for tags |
| 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 |
| success | boolean | No | Green background color for tags |
| value | string[] | No | Default value (controlled) |
| warning | boolean | No | Orange background color for tags |
Basics
The following is a basic example of a Taglist field.
<Taglist placeholder="Enter Value" value={['foo', 'bar']} /> Copy
Events
The following example makes use of all the possible events for Taglist.
<Taglist onUpdate={console.log} /> 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 Taglist field red.
<Taglist error value={['foo', 'bar']} /> Copy
Custom Styles
You can add your own custom class to selects or use any of the respective frui-field-taglist, frui-field-taglist-tag, frui-field-taglist-remove, and frui-field-taglist-input CSS classes.