Grapes homepage1.44.0

    FormField

    Component to enrich a Grapes input.

    View source code

    Basic usage

    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.

    This is an optional description.

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

    Tooltip

    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.

    Optional
    <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.

    This information is required.
    <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.

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

    Best practices

    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>