FormElement

Provides form-related context (ie. required/disabled/readOnly) for building form components, analogous to MUI's [`FormControl`](https://mui.com/material-ui/api/form-control/) component. It is used internally to build UI Kit's form components (eg. `HvInput`, `HvDatePicker`), and can be used to build custom form components.

Source Code

uikit-react-core

⚠️

You probably don’t need to use this component directly. Instead, please check out Related components for a list of ready-to-use UI Kit form components.

HvFormElement exposes the common properties to be shared between all form components:

required - Indicates that the form component must be filled out before form submission.
disabled - Indicates that the form component cannot be interacted with.
readOnly - Indicates that the form component cannot be modified.
status - Indicates the validation status of the form component.

Along with the properties above, form components also share the value/defaultValue + onChange props, used to control the value of the form component, analogous to the native input component. The playground below allows for customization of these properties.

NameInput your name

This is the error message.

required

readOnly

disabled

status

<HvFormElement 
  required
  readOnly={false}
  disabled={false}
  status="invalid"
>
  <p label="Name">
    <u>
      Input your name
    </u>
    <No Display Name
      endAdornment={<><No Display Name icon={<HvIconFail color="negative" />} showWhen="invalid"/><No Display Name icon={<HvIconSuccess color="positive" />} showWhen="valid"/></>}
      placeholder="Insert name"
    />
  </p>
  <u disableBorder>
    This is the error message.
  </u>
</HvFormElement>

<HvFormElement 
  required
  readOnly={false}
  disabled={false}
  status="invalid"
>
  <p label="Name">
    <u>
      Input your name
    </u>
    <No Display Name
      endAdornment={<><No Display Name icon={<HvIconFail color="negative" />} showWhen="invalid"/><No Display Name icon={<HvIconSuccess color="positive" />} showWhen="valid"/></>}
      placeholder="Insert name"
    />
  </p>
  <u disableBorder>
    This is the error message.
  </u>
</HvFormElement>

Building blocks

The HvFormElement component should be constructed using an underlying <input> component or equivalent (eg. <select>) along with the following building blocks provided by UI Kit:

<HvAdornment> - a decorative icon or action that’s rendered conditionally
<HvLabel> - a recognizable name for a given form element (label prop)
<HvInfoMessage> - an additional descriptive text for the form element (description prop)
<HvWarningText> - an error message, displayed only when the form element is in an invalid state (statusMessage prop)

NameInput your name

This is the error message.

<HvFormElement required status="invalid">
  <HvLabel label="Name">
    <HvInfoMessage>Input your name</HvInfoMessage>
    <HvBaseInput
      placeholder="Insert name"
      endAdornment={
        <>
          <HvAdornment showWhen="invalid" icon={<Fail color="negative" />} />
          <HvAdornment showWhen="valid" icon={<Success color="positive" />} />
        </>
      }
    />
  </HvLabel>
  <HvWarningText disableBorder>This is the error message.</HvWarningText>
</HvFormElement>

<HvFormElement required status="invalid">
  <HvLabel label="Name">
    <HvInfoMessage>Input your name</HvInfoMessage>
    <HvBaseInput
      placeholder="Insert name"
      endAdornment={
        <>
          <HvAdornment showWhen="invalid" icon={<Fail color="negative" />} />
          <HvAdornment showWhen="valid" icon={<Success color="positive" />} />
        </>
      }
    />
  </HvLabel>
  <HvWarningText disableBorder>This is the error message.</HvWarningText>
</HvFormElement>

UI Kit form components will automatically handle the rendering of these building blocks, whose customization is available via the aforementioned label/description/statusMessage props.

The example below demonstrates how these elements are used in the HvInput component:

NameInput your name

Custom error message.

<HvInput
  required
  label="Name"
  description="Input your name"
  placeholder="Insert name"
  statusMessage="Custom error message."
  status="invalid"
/>

<HvInput
  required
  label="Name"
  description="Input your name"
  placeholder="Insert name"
  statusMessage="Custom error message."
  status="invalid"
/>

The following are ready-to-use form components built with HvFormElement and its building blocks:

File Uploader Input