FormRow

How to get FormRow

import { FormRow } from 'fds/components';

Type: Component

Renders a row in a Form component, which should contain a single form field or a set of form fields as children. FormRow renders a Label above or before the form field, based on the "labelPosition" prop of the parent Form component.

Props

# Name Type Description
1. children ReactNode
2. [hasRequiredAsterisk] Boolean

Whether or not to show a red asterisk symbol to indicate the form field inside the form row is required.

3. [isLabelBold] Boolean

Whether or not the label is bold.


  Default value
false
4. [labelColorName] String

The color of the label.


  Default value
"text-muted-color"
5. label String

The human readable label displayed in the component.

6. [labelPosition] String

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

  • 'above'

  • 'before'

  Default value
"above"
7. [onMouseEnter] Function

A callback that is called whenever the pointer is moved over the component. This callback is only fired when the pointer enters the component.

For more information about React and "events", check the React documentation


  Arguments
# Name Type Description
1. event ReactSyntheticEvent
8. [onMouseLeave] Function

A callback that is called whenever the pointer is moved off the component. This callback is only fired when the pointer leaves the component.

For more information about React and "events", check the React documentation


  Arguments
# Name Type Description
1. event ReactSyntheticEvent
9. [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
"m"

Related links