FormRow

Type: React component

How to get FormRow?

JavaScript

import { FormRow } from 'fds/components';

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

  1. children

    (Required)

    Type: ReactNode

  2. hasRequiredAsterisk

    (Optional)

    Type: Boolean

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

  3. isLabelBold

    (Optional)

    Type: Boolean

    Whether or not the label is bold.

    Default value

  4. labelColorName

    (Optional)

    Type: String

    The color of the label.

    Default value

  5. label

    (Required)

    Type: String

    The human readable label displayed in the component.

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

  7. onMouseEnter

    (Optional)

    Type: 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

    Default value

  8. onMouseLeave

    (Optional)

    Type: 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

    Default value

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