Form

Type: React component

How to get Form?

JavaScript

import { Form } from 'fds/components';

Aggregates values and feedback returned from child form components. The child form components don't have to be direct children of the form. It's recommended to use FormRow components as direct children since Form also serves as a styling container for FormRow components, preserving the vertical spacing between these components.

When using Form, it's required to implement the "name" prop on your form components. This name will be used in "feedbackByName" and "valueByName".

Props

  1. children

    (Optional)

    Type: ReactNode

  2. feedbackByName

    (Optional)

    Form feedback keyed by name (corresponds with the "name" prop on form components).

    Default value

  3. labelPosition

    (Optional)

    Type: String

    The position of the Label rendered in FormRow relative to the form field. The possible values are:

    • 'above'

    • 'before'

    Default value

  4. isScrollContainer

    (Optional)

    Type: Boolean

    Whether or not this component should act as a scroll container. Meaning, if it should render a (vertical) scrollbar if the contents of the component exceed their bounds; available space.

    When making a component a scroll container, a renderer is also introduced. This is used to render positioned elements like Drop to.

    Default value

  5. onChange

    (Optional)

    Type: Function

    Deprecated!

    Use onFieldChange instead. onChange causes issues with dynamic forms when fields are added or removed in batches.

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

    This callback is called just before the "validate" prop callback 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. onFieldBlur

    (Optional)

    Type: Function

    A callback that is called whenever a component is being blurred (loses its focused state).

    Arguments

    Default value

  7. onFieldChange

    (Optional)

    Type: Function

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

    This callback is called just before the "validate" prop callback 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

  8. onFieldFocus

    (Optional)

    Type: Function

    A callback that is called whenever a component is being focused..

    Arguments

    Default value

  9. onInitialize

    (Optional)

    Type: Function

    Default value

  10. paddingSize

    (Optional)

    Type: Number | String | Object

    The amount of padding rendered by the component.

    This should be a either, A single size value, one of the following values:

    • 0 (zero, no padding at all)

    • 's' (small)

    • 'm' (medium)

    • 'l' (large)

    to set the paddingSize for the top, right, bottom and left side to a single shared value.

    Or you can pass an object whose properties determine a specific padding size for either:

    • 'horizontal': %single size value%

    to set the 'left' and 'right' padding to the given size value (one of the values listed above)

    • 'vertical': %single size value%

    to set the 'top' and 'bottom' padding

    Or you can pass any combination of 'bottom', 'horizontal', 'left', 'right', 'top', 'vertical', where the more specific keys override the generic (eg. setting 'left': 's' and 'horizontal': 'm' would result in a padding size of 's' for the left side and a size of 'm' for the right side.

    Default value

  11. spaceVerticalSize

    (Optional)

    Type: Number | String

    The amount of vertical space (or margin) between the children of the component.

    This should be one of the following values:

    • 0 (zero, no margin at all)

    • 's' (small)

    • 'm' (medium)

    • 'l' (large)

    Default value

  12. valueByName

    (Optional)

    Type: String | FDS~Value

    Form values keyed by name (corresponds with the "name" prop on form components).

    Default value