form-field.md

Form field (FormField)

Enables the creation of properly styled controls in a form.

Properties

className

Adds the specified classes to the root element of the component.

Type: String

Required: No

controlId

The ID of the primary form control. You can use this to set the for attribute of a label for accessibility. If you don't set this property, the control group automatically sets the label to the ID of an inner form control (for example, an input component). This only works well if you're using a single control in the form field.

Type: String

Required: No

id

Adds the specified ID to the root element of the component.

Type: String

Required: No

stretch

Determines whether the primary control should expand to 12 columns. By default (or when this property is set to false), the primary control occupies 9 columns. The secondary control uses the remaining 3 columns. On smaller viewports, both components occupy 12 columns and stack on top of each other.

If this property is set to true, the primary control uses the full 12 columns. The secondary control (if present) also uses 12 columns, and the two controls stack on top of each other.

Type: Boolean

Default: false

Valid values: true | false

Required: No

Slots

children (control)

The primary form control (for example, input, textarea, etc.).

constraintText

Constraint text that's displayed below the control. Use this to provide additional information about valid formats, etc.

description

Detailed information about the form field that's displayed below the label.

errorText

Text that displays as a validation message. If this is set to a non-empty string, it will render the form field as invalid.

info

Use to display an 'Info' link next to the label.

label

The main label for the form field.

secondaryControl

A secondary control. You can use this for custom actions and content.

License Summary

The documentation is made available under the Creative Commons Attribution-ShareAlike 4.0 International License. See the LICENSE file.