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
children
(Optional)
Type: ReactNode
feedback
By Name (Optional)
Type: Object<FDS~Name, FDS~FormFeedback>
Form feedback keyed by name (corresponds with the "name" prop on form components).
Default value
is
Scroll Container (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
on
Change (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
on
Field Blur (Optional)
Type: Function
A callback that is called whenever a component is being blurred (loses its focused state).
Arguments
Default value
on
Field Change (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
on
Field Focus (Optional)
Type: Function
A callback that is called whenever a component is being focused..
Arguments
Default value
on
Initialize (Optional)
Type: Function
Default value
padding
Size (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
-
space
Vertical Size (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
-
value
By Name (Optional)
Type: Object<String, FDS~Value>
Form values keyed by name (corresponds with the "name" prop on form components).
Default value