Thanks to visit codestin.com
Credit goes to design.gitlab.com

Form fields

Form fields provides a way to build forms using configuration.

Examples

GlFormFields
Open in Storybook
Loading story...

Structure

TODO:
Add structure image. Create an issue

Guidelines

TODO:
Add guidelines. Create an issue

Appearance

TODO:
Add appearance. Create an issue

Behavior

TODO:
Add behavior. Create an issue

Accessibility

TODO:
Add accessibility. Create an issue

Code reference

Usage

GlFormFields provides form builder functionality for ease of building simple forms out of other GitLab UI form components.

For a code example, look at the story. It covers usage of mapValue, validators, custom form elements, and inputAttrs.

Fields type

Each value of fields prop is expected to be a FieldDefinition. See below for the shape of this type:

interface FieldDefinition<TValue> {
  // Label text to show for this field.
  // When explicitly set to null, the label is suppressed.
  // When undefined or not provided, the field name is used as the label.
  label?: string | null;

  // Collection of validator functions
  validators?: Array<(value: TValue) => string | undefined>;

  // Function that maps the inputted string value to the field's actual value
  // (e.g. a Number).
  mapValue?: (input: string) => TValue;

  // Properties that are passed to the actual input for this field.
  inputAttrs?: {};

  // Properties that are passed to the group wrapping this field.
  groupAttrs?: {};

  // When true, renders the form group as a fieldset with legend instead of div with label.
  fieldset?: boolean;
}

Label behavior

  • label: "Custom Label" - Renders the provided label
  • label: null - Suppresses the label (no label rendered)
  • label: undefined or not provided - Uses the field name as the label (default behavior)

Slots

NameDescription
input(<fieldName>)Used to render components other than GlFormInput.
group(<fieldName>)-labelUsed for label slot on GlFormGroup of a specific field.
group(<fieldName>)-descriptionUsed for description slot on GlFormGroup of a specific field.
group(<fieldName>)-label-descriptionUsed for label-description slot on GlFormGroup of a specific field.
after(<fieldName>)Used to render content after GlFormGroup of a specific field.

GlFormFields

Loading story...

Last updated at: