MultipleValuesInput

Type: React component

How to get MultipleValuesInput?

JavaScript

import { MultipleValuesInput } from 'fds/components';

Wraps a form field to allow adding multiple values with that same component. Renders a button allowing the user to add new values, which will cause another row to appear with the provided form component. Eventually input of all values is aggregated into a single array and is passed to the onChange prop.

Props

  1. addButtonLabel

    (Optional)

    Type: String

    The human readable label which should be presented inside the "add" button.

    Default value

  2. initialValue

    (Optional)

    Type: Any

    The initial value of the component when adding it using the "add" button.

    Default value

  3. isDisabled

    (Optional)

    Type: Boolean

    Whether or not the component should be rendered in a disabled state.

    Default value

  4. name

    (Optional)

    Type: String

    The name of this component to identify it (and its value) when used inside an intelligent container component which aggregates its children (and/or their values), like a Form.

    Default value

  5. onChange

    (Optional)

    Type: Function

    A callback that is called whenever a component's value changes.

    This callback is called just before the "validate" prop is called.

    Use this callback to update local state which in turn should update the value prop of the component whose callback just fired.

    Arguments

    Default value

  6. placeholder

    (Optional)

    Type: String

    The placeholder text displayed in component when it is empty, i.e. has no values.

    Default value

  7. removeButtonTooltipContent

    (Optional)

    Type: React node

    The content of the tooltip that is displayed when hovering over the thrash can icon.

    You can use either a string or a ReactElement for the tooltip contents:

    • string: the textual content of the tooltip

    • ReactElement: a React Element (instance of a React Component, usually created with JSX)

    Default value

  8. renderFormField

    (Required)

    Type: Function

    A callback that is called for each value in the values array, which should return a form field instance.

    Arguments

  9. tooltipContent

    (Optional)

    Type: String | ReactElement

    The content of the tooltip that is displayed when hovering over the whole component.

    • string: the textual content of the tooltip

    • ReactElement: a React Element (instance of a React Component, usually created with JSX)

    Default value

  10. validate

    (Optional)

    Type: Function

    A callback that is called directly after the value(s) of a form component change(s).

    Use this callback to check the selected value(s) against business rules and to set any feedback for the user based on this.

    Arguments

    Returns

    Default value

  11. values

    (Required)

    Type: Array<Any>

    The current value of the component. This value will be visualized in the component, often using a human readable label, sometimes using another visual indication (e.g. Checkbox).

    Depending on the component, the data type in JavaScript might be restricted further: eg: a TimeSelect might expect a Date, a TextInput a string etc. These restrictions are implemented with React PropTypes console warnings.

    Default value