Form Control

inprogress

    Overview

    The FormControl component is a wrapper for form controls that provides label, help text, and error message functionality. It can be used with any form control like TextInput, Checkbox, etc.

    When to use

    Use FormControl when you need to provide a label, help text, or error message for a form control.

    When to consider an alternative

    t.b.d.


    Component

    Default

    Variants

    Pass the variant prop to the FormControl to change the appearance of the form control. No variant is the default variant. Possible variants are:

    • FormControl.Variants.DEFAULT
    • FormControl.Variants.INVERT

    Add a link to the FormControl to provide additional information to the user.

    With Help Text

    Add helpText to the FormControl to provide additional information to the user.

    With Counter

    Add a counter to the FormControl to show the current character count of the input. The counter will be updated automatically when the user types in the input.

    Error


    Properties

    Default

    PropertyTypeRequiredDefault
    utilClassNamesStringfalse-
    childrenNodefalse-
    formControlRefShape
    { "current": "Any" }
    false-
    variantEnum
    "default" │ "invert"
    false-
    labelStringfalse-
    helpTextStringfalse-
    linkNodefalse-
    validationFeedbackNodefalse-
    maxLengthNumberfalse-
    htmlForStringfalse-