Formcontrol error message spacing

[johnf]

Hi,

I'm using something like this

   <FormControl isInvalid={error}>
      <Input value={value} />                                                    
                                                                                
      <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
        {error}    
      </FormControl.ErrorMessage>
    </FormControl>

The problem I'm having is that the spacing between my inputs changes depending on is there is an error or not

vs

Is there a sensible way to fix this, my hack is to make the formcontrol always invalid and to render an empyy message

[kaili-kameoka]

What kind of margin are you using. To reproduce your screenshot, I did used this code:

<FormControl isInvalid={true}>
  <Input value={"value"} mb={4} />                                                    
                                                                            
  <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
    {"This is an error message"}    
  </FormControl.ErrorMessage>
</FormControl>
<FormControl isInvalid={false}>
  <Input value={"value"} mb={4} />                                                    
                                                                            
  <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
    {"This is an error message"}    
  </FormControl.ErrorMessage>
</FormControl>

To fix it, you can move the margin to the parent FormControl:

<FormControl isInvalid={true}  mb={4}>
  <Input value={"value"} />
    <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
      {"This is an error message"}    
    </FormControl.ErrorMessage>
  </FormControl>
<FormControl isInvalid={false} mb={4}>
  <Input value={"value"} />
  <FormControl.ErrorMessage leftIcon={<WarningOutlineIcon size="xs" />}>
    {"This is an error message"}    
  </FormControl.ErrorMessage>
</FormControl>

[johnf]

Here is a better example of what I'm talking about https://codesandbox.io/s/fld24?file=/src/components/Example.tsx

See how the button jumps down when you press it and the error message appears.
My current workaround is to set isInvalid to always be true and render a space when there isn't an error.

function Example() {
  const [error, toggleError] = React.useState(false);

  return (
    <Column flex="1" p="4" w="80%" mt="4">
     <FormControl isInvalid={error}>
       <Input placeholder="Email" />

       <FormControl.ErrorMessage>
         Something went wrong
       </FormControl.ErrorMessage>
     </FormControl>

     <Text>Next Item</Text>
     <Button onPress={() => toggleError(!error)}>
        Toggle Error
     </Button>
   </Column>
  );
}