FormField

Component to enrich a Grapes input.

Basic usage

Your name

const Demo = () => {
  const [value, setValue] = useState("");

  return (
    <FormField label="Your name">
      <TextInput
        value={value}
        onChange={(event) => {
          setValue(event.target.value);
        }}
      />
    </FormField>
  );
};

Description

Use the description prop to add a description to the field.

Your name

This is an optional description.

<FormField label="Your name" description="This is an optional description.">
  <TextInput {...textInputProps} />
</FormField>

Use the infoTipContent prop to create a Tooltip on the right side of the label.

<FormField
  label="Your name"
  infoTipContent="Some useful information to make your life easier."
>
  <TextInput {...textInputProps} />
</FormField>

Hint

Use the hint prop to display a hint on the right side of the field.

Your nameOptional

<FormField label="Your name" hint="Optional">
  <TextInput {...textInputProps} />
</FormField>

Error message

Use the alertMessage props to display an alert message below the field. When given, the FormField will also make any input children invalid and set the right html and aria attributs to it.

<FormField label="Your name" alertMessage="This information is required.">
  <TextInput {...textInputProps} />
</FormField>

Warning message

Use the warningMessage props to display a warning message below the field.

<FormField
  label="Your name"
  warningMessage="It looks like this is not your real name."
>
  <TextInput {...textInputProps} />
</FormField>

In situations where you need to use a FormField without a label, we recommend that you still give a label but add the prop visuallyHideLabel. By doing so, your input will be labelled by your label, making your app more accessible and easier to test.

<FormField
  label="Your name"
  visuallyHideLabel
>
  <TextInput {...textInputProps} />
</FormField>

const Demo = () => { const [value, setValue] = useState(""); return ( <FormField label="Your name"> <TextInput value={value} onChange={(event) => { setValue(event.target.value); }} /> </FormField> ); };

Error message

Use the alertMessage props to display an alert message below the field. When given, the FormField will also make any input children invalid and set the right html and aria attributs to it.

Your name

This information is required.

<FormField label="Your name" alertMessage="This information is required.">
  <TextInput {...textInputProps} />
</FormField>

Best practices

<FormField
  label="Your name"
  visuallyHideLabel
>
  <TextInput {...textInputProps} />
</FormField>