Form

How to get Form

import { Form } from 'fds/components';

Type: Component

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

# Name Type Description
1. [children] ReactNode
2. [feedbackByName] Object<Name | FormFeedback>

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

  Default value
{}

  Name

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.

  FormFeedback

Type: Object

Specifies human readable validation coming from user input in a form component. Generally returned from a "validate" prop callback.

Properties

Name Type Description
connotation String

The connotation type name.

Specifies the meaning and/or severity of the given feedback. The possible values are: (from least to most severe)

  • 'success'

  • 'info'

  • 'warning'

  • 'error'

message node

The feedback message.

The human readable message displayed in the component, displayed inside a Text component if you use a string. If you want to display inlines (such as a TextLink component) inside your message. You have to provide the Text component yourself. In that case, take care to set the align and colorName prop as appropriate. For the align prop, use "center" or omit it as appropriate. For the colorName prop, use "text-muted-color".

3. [labelPosition] String

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

  • 'above'

  • 'before'

  Default value
"above"
4. [isScrollContainer] 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
false
5. [onChange] 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
# Name Type Description
1. parameters Object
  Members

Members

Name Type Description
feedbackByName Object<Name | FormFeedback>

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


  Name

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.

  FormFeedback

Type: Object

Specifies human readable validation coming from user input in a form component. Generally returned from a "validate" prop callback.

Properties

Name Type Description
connotation String

The connotation type name.

Specifies the meaning and/or severity of the given feedback. The possible values are: (from least to most severe)

  • 'success'

  • 'info'

  • 'warning'

  • 'error'

message node

The feedback message.

The human readable message displayed in the component, displayed inside a Text component if you use a string. If you want to display inlines (such as a TextLink component) inside your message. You have to provide the Text component yourself. In that case, take care to set the align and colorName prop as appropriate. For the align prop, use "center" or omit it as appropriate. For the colorName prop, use "text-muted-color".

valueByName Object<String | Value>

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


  Value

Type: *

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.

6. [onFieldBlur] Function

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


  Arguments
# Name Type Description
1. name String

The name of the form field that is blurred.

7. [onFieldChange] 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
# Name Type Description
1. parameters Object
  Members

Members

Name Type Description
feedback Object

Specifies human readable validation coming from user input in a form component. Generally returned from a "validate" prop callback.

  Members

Members

Name Type Description
connotation String

The connotation type name.

Specifies the meaning and/or severity of the given feedback. The possible values are: (from least to most severe)

  • 'success'

  • 'info'

  • 'warning'

  • 'error'

message node

The feedback message.

The human readable message displayed in the component, displayed inside a Text component if you use a string. If you want to display inlines (such as a TextLink component) inside your message. You have to provide the Text component yourself. In that case, take care to set the align and colorName prop as appropriate. For the align prop, use "center" or omit it as appropriate. For the colorName prop, use "text-muted-color".

name 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.

value *

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.

8. [onFieldFocus] Function

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


  Arguments
# Name Type Description
1. name String

The name of the form field that is focused.

9. [onInitialize] Function
10. [paddingSize] 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
0
11. [spaceVerticalSize] 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
"l"
12. [valueByName] Object<String | Value>

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

  Default value
{}

  Value

Type: *

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.

Related links