Change label color when TextInput is in error state

81 Views Asked by At

When an input is in error state, the red text appears with the error notification and the inputfield changes it's outline to red. How can I also colour the label of the TextInput red?

Currently only assigned some classes to the TextInput:

export const theme = createTheme({
  /* Put your mantine theme override here */
  components: {
    TextInput: TextInput.extend({
      classNames: {
        root: classes["text-input"],
        label: classes["text-input__label"],
        error: classes["text-input__error"],
        input: classes["text-input__input"]
      }
    })
  }
});

This is my mantine form:

const form = useForm({
        initialValues: {
            name: ''
        },
        validate: {
            name: (value) => (value.length <= 0) ? (<><Icon type="info" />Name is too short.</>) : value.length > 25 ? 'Name is too long.' : null
        }
    });

And some of the applied scss

.text-input {
  display: flex;
  flex-direction: column;

  .text-input__label {
    order: -1;
  }

  .text-input__error {
    order: -1;

    display: flex;
    flex-direction: row;
    align-items: center;
  }
}

Any help would be greatly appreciated:)

0

There are 0 best solutions below