Can I remove the default error message from the input element, also the styles (margin-bottom)?
I have a group of two inputs, and I want to add the error message right below them, not below each one.
#Hide original error message below the input
wooden relic
dull totem
You have to use different component to show error conditionally in separate line
wooden relic
Yes, I'm already doing this on the second image.
I just want to hide the default (Image 1) and remove the margin-bottom
proven oxide
Do you use @mantine/form?
wooden relic
Yes
{form
.getInputProps("prices")
.value.map((price: Price, idx: number) => (
<>
<Box>
<Group position="apart" align="end" key={idx}>
<Box
sx={() => ({
flex: "1 1 0%",
})}
>
<TextInput
size="sm"
label="product.price.label"
required={pricesLength >= 2}
html-novalidate
{...form.getInputProps(`prices.${idx}.label`)}
/>
</Box>
<Box
sx={() => ({
width: "8rem",
})}
>
<NumberInput
hideControls
required
label="price.amount"
defaultValue={price.amount}
decimalSeparator=","
precision={2}
size="sm"
{...form.getInputProps(`prices.${idx}.amount`)}
/>
</Box>
<Box ml="sm">
<ActionIcon
size="lg"
disabled={
form.getInputProps("prices").value.length <= 1
}
onClick={() => removePriceFromArray(idx)}
>
<IconTrash size={20} />
</ActionIcon>
</Box>
</Group>
<Text mt="sm" c="red" fz="xs">
{form.errors[`prices.${idx}.amount`]}
</Text>
</Box>
</>
))}